html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  padding-bottom: 160px;
  line-height: 1.42857143;
  color: #555;
  margin:0px;
  background:url(../images/quiz/woman-in-mask-reading-1600x1100.jpg) no-repeat center top;
  background-color: #444;
  background-size: 100%;
  background-attachment: fixed;
  font-family: 'Open Sans', sans-serif; color:#000;
  font-size: 14px;
}

h1,h2,h3,h4,h5,h6,h7,p,ul,li {margin:0px; padding:0px;}
img{ border:none; max-width:100%;}
a{text-decoration:none;}
h1{ font-size:55px; line-height:59px; color:#4d0d80; font-weight:700; }
h2{ font-family: 'Oswald', sans-serif; font-size:40px; color: #DC3D24; color: #8F8DC1; font-weight:700; margin-top:10px; padding-left: 1em; padding-right: 1em; }
h3{ font-family: 'Roboto Slab', Oswald, sans-serif; color:#000; font-size:22px; color:#4a4a4a; font-weight:400; margin-top:10px; }
h4{ font-size:14px; color:#000000; font-weight:bold; text-align:center; min-height:50px; }
h5{ font-size:14px; color: maroon; color: #232B2B; color: #555; font-weight: bold; }

.textleft { text-align: left; }
h3.textleft { padding-left: 2em; paddng-right: 2em; }
.textcenter { text-align: center; }
.textjustify { text-align: justify; }
p{font-weight:normal; font-size:13px;}
.top_header{background:url(../images/quiz/top_bg.png) no-repeat top center; height:110px; padding:0px 0 50px 0;}
.logo { float: left; font-family: 'Yellowtail', sans-serif; font-size: 2.6em; line-height: 1.40em; text-align: left; color: #555; padding-top: 20px; border: 1px solid green; }
.logo img { }
.address { float: right; text-align: right; width: 340px; color: #555; font-size: 1.1em; padding-top: 22px; border: 0px solid red; }
.main_wrapper { padding:0px; margin-bottom:3em; margin-top:-64px; }
.shadowed { box-shadow:0 0 5px #f3f3f3; }

.container_top {
  margin-right: auto;
  margin-left: auto;
}
.container {
  margin-right: auto;
  margin-left: auto;
}
.clearfix:before,
.clearfix:after,
.container_top:before,
.container_top:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after
{
  display: table;
  content: " ";
}
.clearfix:after,
.container_top:after,
.container:after,
.container-fluid:after
{
  clear: both;
}

#splash_preheader { margin-top: 2em; font-size:12px; font-family: 'Lexend Zetta', verdana, sans-serif; text-align: center; line-height: 1.4em; padding-left: 1em; padding-right: 1em; }
#splash_separator { max-width: 640px; width: 60%; margin-top: 1.0em; margin-bottom: 0em; }
#begin_quiz { padding-top: 1em; padding-bottom: 1em; }
#splash_footer { max-width: 75%; font-family: 'Lexend Zetta', verdana, sans-serif; font-size: 12px; text-align: center; line-height: 1.5em; }

.initiate_survey { cursor: pointer; max-width: 300px; }

.progress-bar {
	border: 1px solid #e2e2e2;
	width: 90%;
	height: 20px;
	padding: 0px;
	margin-top: 1em;
	margin-bottom: 1em;
	background-color: #f4f4f4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.progress-bar .label {
	position: absolute;
	width: 90%;
	text-align: center;
	font-size: 15px;
	height: 20px;
	padding-top: 2px;
	line-height: 18px;
	font-weight: bold;
}
.progress-bar .fill-container {
	position: relative;
/*	width: 52%; */
	height: 20px;
}
.progress-bar .fill {
	position: absolute;
	background: #C1ADFF;
	border: 1px solid #C1ADFF;
	margin-top: -1px;
	overflow: hidden;
	height: 20px;
	width: 100%;
}
.progress-bar .fill-partial {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}
.progress-bar .fill-all {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.progress-bar .fill .label {
	margin-top: -1px;
	color: #fff;
}

.choose_gender, .male, .female, .choose_difficulty { max-width: 800px; margin-right: auto; margin-left: auto; padding-top: 0px; border: 0px solid black; }
label { cursor: pointer; display: inline-block; }
label.resizable_gender { margin: 0px 20px; padding-bottom: 4em; }
.quiz_sec,
#crunching {
	background: rgba(255,255,255,0.9); box-shadow: 0px 0px 10px -5px #000000; box-sizing: border-box;
	display: none; padding-top:15px; padding-bottom:25px; text-align:center; padding-left: 0px; padding-right: 0px;
}
.checkbox_selection, .radio_selection { margin-top: 1.5em; }
.age_request, .height_request, .weight_request {
	margin: 1em;
	padding-top:5px; padding-bottom:15px; text-align:center; padding-left: 0px; padding-right: 0px; font-size: 1.4em;
}
#height_in_cm, #weight_in_kg { font-weight: bold; font-size: 1.4em; color: green; }

/* ------------ start modal ----------- */
/* css for the modal popup dialog boxes */

.more-info { display: inline-block; height: 33px; float: right; width: 8%; }
.more-info svg{ box-shadow: 0 0 4px 0 rgba(0,0,0,.16); border-radius: 50%; cursor: pointer; transform: scale(.85); }
.more-info svg:hover{ box-shadow: 0 0 4px 0 rgba(0,0,0,.4); opacity: 0.9; }
.more-info { margin-right: 7px; }

.left-info { float: left; width: 4%; margin-left; 7px; }

.modal-btn-left,
.modal-btn-right {
	display: block;
	margin: 0 auto;
	cursor: pointer;
border: 1px solid red;
}
.modal-btn-right {
	float: right;
}

.modal-container-1,
.modal-container-2,
.modal-container-3 {
	margin: 0px auto;
	padding-top: 0px;
	font-family: verdana, sans-serif;
	position: absolute;
	left 0px;
	top: 0px;
	height: 0px;
border: 0px solid red;
}

.modal-container-1 a,
.modal-container-2 a,
.modal-container-3 a {
	color: #868afa;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}
.modal-container-1 .modal-text,
.modal-container-2 .modal-text,
.modal-container-3 .modal-text {
	text-align: left;
	font-size: 1.0em;
	line-height: 1.5em;
	padding: 1em;
}

.modal-container-1 .modal-content-diabetes,
.modal-container-1 .modal-content-copd,
.modal-container-1 .modal-content-asthma,
.modal-container-1 .modal-content-fibrosis,
.modal-container-1 .modal-content-hypertension,
.modal-container-1 .modal-content-infarction,
.modal-container-1 .modal-content-atherosclerosis,
.modal-container-1 .modal-content-stroke,
.modal-container-1 .modal-backdrop-diabetes,
.modal-container-1 .modal-backdrop-copd,
.modal-container-1 .modal-backdrop-asthma,
.modal-container-1 .modal-backdrop-fibrosis,
.modal-container-1 .modal-backdrop-hypertension,
.modal-container-1 .modal-backdrop-infarction,
.modal-container-1 .modal-backdrop-atherosclerosis,
.modal-container-1 .modal-backdrop-stroke,

.modal-container-2 .modal-content-congestive,
.modal-container-2 .modal-content-rheumatic,
.modal-container-2 .modal-content-kidney,
.modal-container-2 .modal-content-liver,
.modal-container-2 .modal-content-cancer,
.modal-container-2 .modal-content-neurocognitive,
.modal-container-2 .modal-content-sickle,
.modal-container-2 .modal-content-hiv,
.modal-container-2 .modal-backdrop-congestive,
.modal-container-2 .modal-backdrop-rheumatic,
.modal-container-2 .modal-backdrop-kidney,
.modal-container-2 .modal-backdrop-liver,
.modal-container-2 .modal-backdrop-cancer,
.modal-container-2 .modal-backdrop-neurocognitive,
.modal-container-2 .modal-backdrop-sickle,
.modal-container-2 .modal-backdrop-hiv,

.modal-container-3 .modal-content-transplant,
.modal-container-3 .modal-content-hemodialysis,
.modal-container-3 .modal-content-respiratory,
.modal-container-3 .modal-content-pregnancy,
.modal-container-3 .modal-content-obesity,
.modal-container-3 .modal-backdrop-transplant,
.modal-container-3 .modal-backdrop-hemodialysis,
.modal-container-3 .modal-backdrop-respiratory,
.modal-container-3 .modal-backdrop-pregnancy,
.modal-container-3 .modal-backdrop-obesity {

	height: 0;
	width: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	cursor: pointer;
	transition: opacity 0.2s ease-in;
}
.modal-container-1 .modal-close-diabetes,
.modal-container-1 .modal-close-copd,
.modal-container-1 .modal-close-asthma,
.modal-container-1 .modal-close-fibrosis,
.modal-container-1 .modal-close-hypertension,
.modal-container-1 .modal-close-infarction,
.modal-container-1 .modal-close-atherosclerosis,
.modal-container-1 .modal-close-stroke,

.modal-container-2 .modal-close-congestive,
.modal-container-2 .modal-close-rheumatic,
.modal-container-2 .modal-close-kidney,
.modal-container-2 .modal-close-liver,
.modal-container-2 .modal-close-cancer,
.modal-container-2 .modal-close-neurocognitive,
.modal-container-2 .modal-close-sickle,
.modal-container-2 .modal-close-hiv,

.modal-container-3 .modal-close-transplant,
.modal-container-3 .modal-close-hemodialysis,
.modal-container-3 .modal-close-respiratory,
.modal-container-3 .modal-close-pregnancy,
.modal-container-3 .modal-close-obesity {

	color: #aaa;
	position: absolute;
	right: 5px;
	top: 5px;
	padding-top: 3px;
	background: #fff;
	font-size: 16px;
	width: 25px;
	height: 25px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
.modal-container-1 .modal-close-diabetes:hover,
.modal-container-1 .modal-close-copd:hover,
.modal-container-1 .modal-close-asthma:hover,
.modal-container-1 .modal-close-fibrosis:hover,
.modal-container-1 .modal-close-hypertension:hover,
.modal-container-1 .modal-close-infarction:hover,
.modal-container-1 .modal-close-atherosclerosis:hover,
.modal-container-1 .modal-close-stroke:hover,

.modal-container-2 .modal-close-congestive:hover,
.modal-container-2 .modal-close-rheumatic:hover,
.modal-container-2 .modal-close-kidney:hover,
.modal-container-2 .modal-close-liver:hover,
.modal-container-2 .modal-close-cancer:hover,
.modal-container-2 .modal-close-neurocognitive:hover,
.modal-container-2 .modal-close-sickle:hover,
.modal-container-2 .modal-close-hiv:hover,

.modal-container-3 .modal-close-transplant:hover,
.modal-container-3 .modal-close-hemodialysis:hover,
.modal-container-3 .modal-close-respiratory:hover,
.modal-container-3 .modal-close-pregnancy:hover,
.modal-container-3 .modal-close-obesity:hover {
	color: #333;
}
.modal-container-1 .modal-content-btn,
.modal-container-2 .modal-content-btn,
.modal-container-3 .modal-content-btn {

	text-align: center;
	cursor: pointer;
	background: #848afa;
	color: #fff;
	width: 40px;
	border-radius: 20px;
	font-size: 16px;
	font-weight: bold;
	padding: 8px;
	margin-bottom: 16px;
}
.modal-container-1 .modal-content-btn:hover,
.modal-container-2 .modal-content-btn:hover,
.modal-container-3 .modal-content-btn:hover {
	color: #fff;
	background: #6A73C4;
}
.modal-container-1 .modal-toggle-diabetes,
.modal-container-1 .modal-toggle-copd,
.modal-container-1 .modal-toggle-asthma,
.modal-container-1 .modal-toggle-fibrosis,
.modal-container-1 .modal-toggle-hypertension,
.modal-container-1 .modal-toggle-infarction,
.modal-container-1 .modal-toggle-atherosclerosis,
.modal-container-1 .modal-toggle-stroke,

.modal-container-2 .modal-toggle-congestive,
.modal-container-2 .modal-toggle-rheumatic,
.modal-container-2 .modal-toggle-kidney,
.modal-container-2 .modal-toggle-liver,
.modal-container-2 .modal-toggle-cancer,
.modal-container-2 .modal-toggle-neurocognitive,
.modal-container-2 .modal-toggle-sickle,
.modal-container-2 .modal-toggle-hiv,

.modal-container-3 .modal-toggle-transplant,
.modal-container-3 .modal-toggle-hemodialysis,
.modal-container-3 .modal-toggle-respiratory,
.modal-container-3 .modal-toggle-pregnancy,
.modal-container-3 .modal-toggle-obesity {
	display: none;
height: 0;
}
.modal-container-1 .modal-toggle-diabetes.active  ~ .modal-backdrop-diabetes,
.modal-container-1 .modal-toggle-diabetes:checked ~ .modal-backdrop-diabetes,
.modal-container-1 .modal-toggle-copd.active  ~ .modal-backdrop-copd,
.modal-container-1 .modal-toggle-copd:checked ~ .modal-backdrop-copd,
.modal-container-1 .modal-toggle-asthma.active  ~ .modal-backdrop-asthma,
.modal-container-1 .modal-toggle-asthma:checked ~ .modal-backdrop-asthma,
.modal-container-1 .modal-toggle-fibrosis.active  ~ .modal-backdrop-fibrosis,
.modal-container-1 .modal-toggle-fibrosis:checked ~ .modal-backdrop-fibrosis,
.modal-container-1 .modal-toggle-hypertension.active  ~ .modal-backdrop-hypertension,
.modal-container-1 .modal-toggle-hypertension:checked ~ .modal-backdrop-hypertension,
.modal-container-1 .modal-toggle-infarction.active  ~ .modal-backdrop-infarction,
.modal-container-1 .modal-toggle-infarction:checked ~ .modal-backdrop-infarction,
.modal-container-1 .modal-toggle-atherosclerosis.active  ~ .modal-backdrop-atherosclerosis,
.modal-container-1 .modal-toggle-atherosclerosis:checked ~ .modal-backdrop-atherosclerosis,
.modal-container-1 .modal-toggle-stroke.active  ~ .modal-backdrop-stroke,
.modal-container-1 .modal-toggle-stroke:checked ~ .modal-backdrop-stroke,

.modal-container-2 .modal-toggle-congestive.active  ~ .modal-backdrop-congestive,
.modal-container-2 .modal-toggle-congestive:checked ~ .modal-backdrop-congestive,
.modal-container-2 .modal-toggle-rheumatic.active  ~ .modal-backdrop-rheumatic,
.modal-container-2 .modal-toggle-rheumatic:checked ~ .modal-backdrop-rheumatic,
.modal-container-2 .modal-toggle-kidney.active  ~ .modal-backdrop-kidney,
.modal-container-2 .modal-toggle-kidney:checked ~ .modal-backdrop-kidney,
.modal-container-2 .modal-toggle-liver.active  ~ .modal-backdrop-liver,
.modal-container-2 .modal-toggle-liver:checked ~ .modal-backdrop-liver,
.modal-container-2 .modal-toggle-cancer.active  ~ .modal-backdrop-cancer,
.modal-container-2 .modal-toggle-cancer:checked ~ .modal-backdrop-cancer,
.modal-container-2 .modal-toggle-neurocognitive.active  ~ .modal-backdrop-neurocognitive,
.modal-container-2 .modal-toggle-neurocognitive:checked ~ .modal-backdrop-neurocognitive,
.modal-container-2 .modal-toggle-sickle.active  ~ .modal-backdrop-sickle,
.modal-container-2 .modal-toggle-sickle:checked ~ .modal-backdrop-sickle,
.modal-container-2 .modal-toggle-hiv.active  ~ .modal-backdrop-hiv,
.modal-container-2 .modal-toggle-hiv:checked ~ .modal-backdrop-hiv,

.modal-container-3 .modal-toggle-transplant.active  ~ .modal-backdrop-transplant,
.modal-container-3 .modal-toggle-transplant:checked ~ .modal-backdrop-transplant,
.modal-container-3 .modal-toggle-hemodialysis.active  ~ .modal-backdrop-hemodialysis,
.modal-container-3 .modal-toggle-hemodialysis:checked ~ .modal-backdrop-hemodialysis,
.modal-container-3 .modal-toggle-respiratory.active  ~ .modal-backdrop-respiratory,
.modal-container-3 .modal-toggle-respiratory:checked ~ .modal-backdrop-respiratory,
.modal-container-3 .modal-toggle-pregnancy.active  ~ .modal-backdrop-pregnancy,
.modal-container-3 .modal-toggle-pregnancy:checked ~ .modal-backdrop-pregnancy,
.modal-container-3 .modal-toggle-obesity.active  ~ .modal-backdrop-obesity,
.modal-container-3 .modal-toggle-obesity:checked ~ .modal-backdrop-obesity {
	background-color: rgba(0, 0, 0, 0.4);
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.2s ease-in;
}
.modal-container-1 .modal-toggle-diabetes.active  ~ .modal-content-diabetes,
.modal-container-1 .modal-toggle-diabetes:checked ~ .modal-content-diabetes,
.modal-container-1 .modal-toggle-copd.active  ~ .modal-content-copd,
.modal-container-1 .modal-toggle-copd:checked ~ .modal-content-copd,
.modal-container-1 .modal-toggle-asthma.active  ~ .modal-content-asthma,
.modal-container-1 .modal-toggle-asthma:checked ~ .modal-content-asthma,
.modal-container-1 .modal-toggle-fibrosis.active  ~ .modal-content-fibrosis,
.modal-container-1 .modal-toggle-fibrosis:checked ~ .modal-content-fibrosis,
.modal-container-1 .modal-toggle-hypertension.active  ~ .modal-content-hypertension,
.modal-container-1 .modal-toggle-hypertension:checked ~ .modal-content-hypertension,
.modal-container-1 .modal-toggle-infarction.active  ~ .modal-content-infarction,
.modal-container-1 .modal-toggle-infarction:checked ~ .modal-content-infarction,
.modal-container-1 .modal-toggle-atherosclerosis.active  ~ .modal-content-atherosclerosis,
.modal-container-1 .modal-toggle-atherosclerosis:checked ~ .modal-content-atherosclerosis,
.modal-container-1 .modal-toggle-stroke.active  ~ .modal-content-stroke,
.modal-container-1 .modal-toggle-stroke:checked ~ .modal-content-stroke,

.modal-container-2 .modal-toggle-congestive.active  ~ .modal-content-congestive,
.modal-container-2 .modal-toggle-congestive:checked ~ .modal-content-congestive,
.modal-container-2 .modal-toggle-rheumatic.active  ~ .modal-content-rheumatic,
.modal-container-2 .modal-toggle-rheumatic:checked ~ .modal-content-rheumatic,
.modal-container-2 .modal-toggle-kidney.active  ~ .modal-content-kidney,
.modal-container-2 .modal-toggle-kidney:checked ~ .modal-content-kidney,
.modal-container-2 .modal-toggle-liver.active  ~ .modal-content-liver,
.modal-container-2 .modal-toggle-liver:checked ~ .modal-content-liver,
.modal-container-2 .modal-toggle-cancer.active  ~ .modal-content-cancer,
.modal-container-2 .modal-toggle-cancer:checked ~ .modal-content-cancer,
.modal-container-2 .modal-toggle-neurocognitive.active  ~ .modal-content-neurocognitive,
.modal-container-2 .modal-toggle-neurocognitive:checked ~ .modal-content-neurocognitive,
.modal-container-2 .modal-toggle-sickle.active  ~ .modal-content-sickle,
.modal-container-2 .modal-toggle-sickle:checked ~ .modal-content-sickle,
.modal-container-2 .modal-toggle-hiv.active  ~ .modal-content-hiv,
.modal-container-2 .modal-toggle-hiv:checked ~ .modal-content-hiv,

.modal-container-3 .modal-toggle-transplant.active  ~ .modal-content-transplant,
.modal-container-3 .modal-toggle-transplant:checked ~ .modal-content-transplant,
.modal-container-3 .modal-toggle-hemodialysis.active  ~ .modal-content-hemodialysis,
.modal-container-3 .modal-toggle-hemodialysis:checked ~ .modal-content-hemodialysis,
.modal-container-3 .modal-toggle-respiratory.active  ~ .modal-content-respiratory,
.modal-container-3 .modal-toggle-respiratory:checked ~ .modal-content-respiratory,
.modal-container-3 .modal-toggle-pregnancy.active  ~ .modal-content-pregnancy,
.modal-container-3 .modal-toggle-pregnancy:checked ~ .modal-content-pregnancy,
.modal-container-3 .modal-toggle-obesity.active  ~ .modal-content-obesity,
.modal-container-3 .modal-toggle-obesity:checked ~ .modal-content-obesity {
	opacity: 1;
	background-color: #fff;
	position: relative;
top: 20vh;
	width: 90%;
	height: auto;
	padding: 10px 30px;
	border-radius: 4px;
	z-index: 999;
	pointer-events: auto;
	cursor: auto;
	visibility: visible;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
}
@media (max-width: 400px) {
	.modal-container-1 .modal-toggle-diabetes.active  ~ .modal-content-diabetes,
	.modal-container-1 .modal-toggle-diabetes:checked ~ .modal-content-diabetes,
	.modal-container-1 .modal-toggle-copd.active  ~ .modal-content-copd,
	.modal-container-1 .modal-toggle-copd:checked ~ .modal-content-copd,
	.modal-container-1 .modal-toggle-asthma.active  ~ .modal-content-asthma,
	.modal-container-1 .modal-toggle-asthma:checked ~ .modal-content-asthma,
	.modal-container-1 .modal-toggle-fibrosis.active  ~ .modal-content-fibrosis,
	.modal-container-1 .modal-toggle-fibrosis:checked ~ .modal-content-fibrosis,
	.modal-container-1 .modal-toggle-hypertension.active  ~ .modal-content-hypertension,
	.modal-container-1 .modal-toggle-hypertension:checked ~ .modal-content-hypertension,
	.modal-container-1 .modal-toggle-infarction.active  ~ .modal-content-infarction,
	.modal-container-1 .modal-toggle-infarction:checked ~ .modal-content-infarction,
	.modal-container-1 .modal-toggle-atherosclerosis.active  ~ .modal-content-atherosclerosis,
	.modal-container-1 .modal-toggle-atherosclerosis:checked ~ .modal-content-atherosclerosis,
	.modal-container-1 .modal-toggle-stroke.active  ~ .modal-content-stroke,
	.modal-container-1 .modal-toggle-stroke:checked ~ .modal-content-stroke,

	.modal-container-2 .modal-toggle-congestive.active  ~ .modal-content-congestive,
	.modal-container-2 .modal-toggle-congestive:checked ~ .modal-content-congestive,
	.modal-container-2 .modal-toggle-rheumatic.active  ~ .modal-content-rheumatic,
	.modal-container-2 .modal-toggle-rheumatic:checked ~ .modal-content-rheumatic,
	.modal-container-2 .modal-toggle-kidney.active  ~ .modal-content-kidney,
	.modal-container-2 .modal-toggle-kidney:checked ~ .modal-content-kidney,
	.modal-container-2 .modal-toggle-liver.active  ~ .modal-content-liver,
	.modal-container-2 .modal-toggle-liver:checked ~ .modal-content-liver,
	.modal-container-2 .modal-toggle-cancer.active  ~ .modal-content-cancer,
	.modal-container-2 .modal-toggle-cancer:checked ~ .modal-content-cancer,
	.modal-container-2 .modal-toggle-neurocognitive.active  ~ .modal-content-neurocognitive,
	.modal-container-2 .modal-toggle-neurocognitive:checked ~ .modal-content-neurocognitive,
	.modal-container-2 .modal-toggle-sickle.active  ~ .modal-content-sickle,
	.modal-container-2 .modal-toggle-sickle:checked ~ .modal-content-sickle,
	.modal-container-2 .modal-toggle-hiv.active  ~ .modal-content-hiv,
	.modal-container-2 .modal-toggle-hiv:checked ~ .modal-content-hiv,

	.modal-container-3 .modal-toggle-transplant.active  ~ .modal-content-transplant,
	.modal-container-3 .modal-toggle-transplant:checked ~ .modal-content-transplant,
	.modal-container-3 .modal-toggle-hemodialysis.active  ~ .modal-content-hemodialysis,
	.modal-container-3 .modal-toggle-hemodialysis:checked ~ .modal-content-hemodialysis,
	.modal-container-3 .modal-toggle-respiratory.active  ~ .modal-content-respiratory,
	.modal-container-3 .modal-toggle-respiratory:checked ~ .modal-content-respiratory,
	.modal-container-3 .modal-toggle-pregnancy.active  ~ .modal-content-pregnancy,
	.modal-container-3 .modal-toggle-pregnancy:checked ~ .modal-content-pregnancy,
	.modal-container-3 .modal-toggle-obesity.active  ~ .modal-content-obesity,
	.modal-container-3 .modal-toggle-obesity:checked ~ .modal-content-obesity {
	position: fixed;
	left: 0;
	top: 10vh;
	width: 80%;
  }
}
/* ------------ end modal ------------ */

#invitation, .phone_request, .thankyou {
	display: none; padding-top:15px; padding-bottom:25px; text-align:center; padding-left: 0px; padding-right: 0px;
}
.quiz_sec.active { display: block; }
.quiz_sec .inner_main { padding-top: 0px; padding-left: 90px; padding-right: 90px; padding-bottom: 20px; border: 0px solid green; }
.quiz_sec h3,
#crunching h3,
#invitation h3, .phone_request h3, .thankyou h3 {
	font-weight:700;
	color: #555;
	padding: 15px 3% 0px; margin:0px; line-height: 1.2em; border: 0px solid red; }
.quiz_sec h6, #invitation h6, .phone_request h6, .thankyou h6 { width: 80%; font-size:17px; line-height: 1.4em; font-weight:500; color:#555; padding:5px 20px; margin:10px auto 15px; border: 0px solid green; }

#invitation, .phone_request, .thankyou, .age_request, .height_request, .weight_request  {
	background: rgba(255,255,255,0.9); box-shadow: 0px 0px 10px -5px #000000; box-sizing: border-box; text-align:center;
}
#invitation, .phone_request, .thankyou { padding: 30px 30px; }
.age_request, .height_request, .weight_request { padding: 18px 18px; }

#intro_left { float: left; max-width: 700px; border: 0px solid red; }
#intro_left h5 { font-size: 1.4em; margin-left: 2em; margin-right: 2em; line-height: 1.6em; margin-top: 0.5em; margin-bottom: 0.5em; border: 0px solid red; }
#intro_left h6,
#intro_left h7 { font-size: 1.2em; max-width: 85%;  padding: 0px; line-height: 1.6em; border: 0px solid red; }
#intro_right { float: left; min-width: 320px; padding-top: 0px; padding-bottom: 0px; text-align: center; border: 0px solid green; font-size: 0.9em; color: #aaaaaa; }
#intro_right a { color: #aaaaaa; }
#intro_right .img { max-width: 94%; height: auto; margin: 3%; display: inline; margin-bottom: 4px; }

h6.fineprint { font-size: 1.1em; }

.quiz_sec label { display:inline-block; text-align:center; margin-top: 0px; margin-bottom: 0px; cursor:pointer; border: 0px solid blue; padding: auto; }
.quiz_sec label span.picture_age {
	display:inline-block; width:222px; height:222px; margin-right: 10px; margin-left: 10px; text-align:center;
	border:1px solid #FF6A00;
border: 1px solid #A17FFF;
	background-size:contain !important; }
.quiz_sec label span.picture_gender {
	display:inline-block; width:222px; height:222px; margin-right: 10px; margin-left: 10px; text-align:center;
	border:1px solid #FF6A00;
border: 1px solid #A17FFF;
	background-size:contain !important; }
.quiz_sec label span.picture_difficulty {
	display:inline-block; width:222px; height:222px; margin-right: 10px; margin-left: 10px; text-align:center; border:0px solid red; background-size:contain !important; }
.quiz_sec label img.gender,
.quiz_sec label img.age {
	border:1px solid #FF6A00;
border: 1px solid #A17FFF;
	display:none; pointer-events: none; }
.quiz_sec label img.difficulty { border:0px solid green; display:none; pointer-events: none; }
.quiz_sec label p { font-size:14px; font-weight:400; color:#4a4a4a; text-align:center; margin:15px 0 15px 0; padding:0px; }

.quiz_sec ul { margin:10px 0 0 0; }

.resizable_gender {
  position: relative;
  min-height: 1px;
  padding: auto;
  margin-top: 0px;
  padding-top: 0px;
}
.resizable_age {
  position: relative;
  min-height: 1px;
  padding: auto;
}
.resizable_difficulty {
  position: relative;
  min-height: 1px;
  padding: auto;
}

.form_sec { max-width:500px; margin:20px auto }
.form_sec .submitButtonPurple {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bab7fd+0,ad9bfb+49,868afa+94,868afa+94 */
background: #bab7fd; /* Old browsers */
background: -moz-linear-gradient(top,  #bab7fd 0%, #ad9bfb 49%, #868afa 94%, #868afa 94%);
background: -webkit-linear-gradient(top,  #bab7fd 0%,#ad9bfb 49%,#868afa 94%,#868afa 94%);
background:      -o-linear-gradient(top,  #bab7fd 0%,#ad9bfb 49%,#868afa 94%,#868afa 94%);
background:     -ms-linear-gradient(top,  #bab7fd 0%,#ad9bfb 49%,#868afa 94%,#868afa 94%);
background:   linear-gradient(to bottom,  #bab7fd 0%,#ad9bfb 49%,#868afa 94%,#868afa 94%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bab7fd', endColorstr='#868afa',GradientType=0 ); /* IE6-9 */
border: #FFFFFF 4px solid; border-radius: 9px; box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.4); box-sizing: border-box; color: #FFF; cursor: pointer; cursor: hand; display: block; font-family: "Arial Rounded MT Bold", sans-serif; font-size: 20px; margin: 0 auto; max-width: 460px; padding: 11px 30px; text-decoration: none; text-transform: uppercase; width: 100%; word-break: break-word; white-space: normal; }

.form_sec label { font-size:17px; font-weight:600; }
.form-group {
  margin-bottom: 15px;
}
.form-sec .retakeid,
.form_sec .firstname,
.form_sec .email {
	border: 1px solid #ccc; box-sizing: border-box; border-radius: 6px; display: block; margin: 10px auto; width: 100%; max-width: 460px; padding: 10px 12px;
	font-size: 1.4em;
}

.next_question {
	margin-left: 2em;
	margin-right: 2em;
	margin-bottom: 2px;
	max-width: 820px;
	border: 0px solid purple;
}
.next_question_button {
	float: right; cursor: pointer; margin-top: 1em; margin-bottom: 1em;
	max-width: 140px; min-width: 100px; padding: 6px;
	background-color: #C1ADFF; color: #ffffff; border-radius: 3px;
	font-weight: bold;
}

.choice {
	margin-left: 2em;
	margin-right: 2em;
	margin-bottom: 2px;
	max-width: 820px;
	text-align: left;
}
.choice a {
	position: relative;
	display: block;
	padding: 10px 15px;
	text-decoration: none;
	background-color: #ECDFD6;
	color:#700000;
	font-size:16px;
	border-radius: 4px;
}
.choice > a:hover,
.choice > a:focus {
	text-decoration: none;
	background-color: #DB5700;
background-color: #A17FFF;
	color:#fff;
}

.choice a.is_selected {
	background-color: #DB5700;
background-color: #A17FFF;
	color:#fff;
}
.choice a.is_unselected {
	background-color: #FFC39B;
background-color: #ECDFD6;
	color:#700000;
}

.center { text-align: center; border: 0px solid red; }
.bold { font-weight: bold; }
.validatingEmail { display: none; font-weight: bold; color: #1F6800; margin-bottom: 1em; margin-top: 2em; padding-bottom: 0px; }
.emailErrorMessage { display: none; font-weight: bold; color: #990000; margin-bottom: 1em; margin-top: 2em; padding-bottom: 0px; }
.loadingText { display: none; padding-top: 20px; font-size: 1.4em; font-weight: bold; color: green; }
.loadingIcon { display: none; }
.loadingIcon img { margin-left:auto; margin-right:auto; }

#thanks { margin-top: 3em; margin-bottom: 1em; }

#footer_links a { color: #7A3A39; font-weight: bold; }

/* ------------ custom radiobox ------------- */

/* hide the browser's default radio button */
.radio-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
/* create a custom checkbox */
.radio-outer {
	overflow: hidden;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 4px;
	border-radius: 3px;
	background: #ECF0F1;
	margin-top: 4px;
	margin-bottom: 8px;
	margin-left: 5%;
	margin-right: 5%;
}
.radio-container {
	float: left;
	display: block;
	position: relative;
	padding-left: 35px;
	padding-top: 0px;
	padding-bottom: 2px;
	cursor: pointer;
	font-size: 18px;
	font-family: tahoma, verdana, sans-serif;
	font-weight: 500;
	color: #555;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 95%;
}
.radiomark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: #ffffff;
	border-radius: 50%;
	border: 2px solid #555;
}
.radio-outer:hover {
	background-color: #E6DDFF !important;
}
/* on mouse-over, add a grey background color */
.radio-container:hover input ~ .radiomark {
	background-color: #eee;
}
/* when the radio button is checked, add a white background */
.radio-container input:checked ~ .radiomark {
	background-color: #ffffff;
}
/* create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after {
	content: "";
	position: absolute;
	display: none;
}
/* show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radiomark:after {
	display: block;
}
/* style the indicator (dot/circle) */
.radio-container .radiomark:after {
 	top: 4px;
	left: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #555;
}

/* ------------ custom checkbox ------------- */

/* hide the browser's default checkbox */
.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
/* create a custom checkbox */
.checkbox-outer {
	overflow: hidden;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius: 3px;
	background: #ECF0F1;
	margin-top: 4px;
	margin-bottom: 8px;
	margin-left: 5%;
	margin-right: 5%;
}
.checkbox-container {
	float: left;
	display: block;
	position: relative;
	padding-left: 35px;
	padding-top: 2px;
	padding-bottom: 0px;
	cursor: pointer;
	font-size: 18px;
	font-family: tahoma, verdana, sans-serif;
	font-weight: 500;
	color: #555;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 85%;
}
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	width: 16px;
	background-color: #ffffff;
	border: 2px solid #555;
	border-radius: 2px;
	margin: 3px;
}
.checkbox-outer:hover {
	background-color: #E6DDFF !important;
}
/* on mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
	background-color: #eee;
}
/* when the checkbox is checked, add a white background */
	.checkbox-container input:checked ~ .checkmark {
	background-color: #ffffff;
}
/* create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
/* show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
	display: block;
}
/* style the checkmark/indicator */
.checkbox-container .checkmark:after {
	left: 3px;
	top: 3px;
	width: 0px;
	height: 0px;
	border: solid #555;
	border-width: 5px 5px 5px 5px;
	border-radius: 2px;
}

/* ------------ animated progress bar prelim ----------- */

.ui-progress-bar { height: 70px; overflow: hidden; position: relative; display: inline-block; width: 450px; background: #cacaca; border-top: 5px solid #cacaca; border-bottom: 5px solid #cacaca; float: left }
.ui-progress { height: 70px; position: absolute; left: 0; top: 0; background-color: #4d0c82; color: #fff; display: block; overflow: hidden; z-index: 1; border: none; }
.crunching_center {
	text-align: center; margin: 0px auto;
}
#crunching { padding: 30px 10px; text-align: center }
#crunching h1 { text-align: center; font-size: 39px; text-transform: uppercase }

/* ------------ animated progress bar start ----------- */
.html5-progress-bar {
   	padding-top: 40px;
	padding-bottom: 100px;
   	width: 100%;
  	max-width: 500px;
  	margin:0 auto;
	font-family: verdana, sans-serif;
}
.html5-progress-bar p {
   	font-size: 18px;
   	text-align: center;
   	font-weight: 600;
   	color: #515151;
}
.progress_count {
  	float: left;
  	width: 100%;
  	text-align: center;
}
.progress_count .pull-left{
	float: left!important;
  	text-align: left;
  	color: #888888;
  	font-size: 12px;
}
.progress_count .pull-right {
	float: right!important;
	margin-right: 1.0em;
  	text-align: right;
  	color: #888888;
  	font-size: 14px;
}

#progressbar {
  	float: left;
  	position: relative;
	min-height: 26px !important;
  	background: #fff;
  	border: 0 none;
  	box-shadow: none !important;
  	width: 100%;
  	margin: 0px auto;
  	border: 1px solid #888888;
}
#pointer {
  	height: 14px;
	margin: -17px 1% 0px 1%;
	z-index: 1;
}
#bar {
	background: #C1ADFF !important;
	width: 0px;
	height: 30px;
	margin: 8px 1% 6px 1%;
	z-index: 0;
}
#progress {
	width: 98%;
	padding-top: 3px;
	color: #fff !important;
	font-weight: normal;
	margin: auto !important;
	position: absolute;
	text-align: center !important;
	text-shadow: 0 0 0 !important;
	top: 0;
	line-height: 35px;
	z-index: 1;
}

/* ------------ progress bar end ------------- */

/* ------------ device adjustments ------------- */

@media (min-width:481px) {
	.quiz_sec label img.age { margin-right: 10px; margin-left: 10px; }
	.quiz_sec label img.difficulty  { margin-right: 10px; margin-left: 10px; }
	.quiz_sec .inner_main {
		padding-top: 10px;
		padding-left: 0px;
		padding-right: 0px;
		margin-left: 15px;
		margin-right: 15px;
		border: 0px solid purple;
	}

}
@media (min-width:566px) {
	.scenario_right { float: right; margin-right: 20px; margin-left: 20px; }
	.scenario_left  { float: left; margin-right: 20px; margin-left: 20px; }
}
@media (min-width: 768px) {
	.container, .container_top {
		width: 750px;
	}
	.resizable_gender {
		margin-top: 0px; padding-top: 0px;
//		border: 1px solid pink;
	}
	.resizable_age,
	.resizable_difficulty {
		width: 33.33333333%;
		max-width: 222px;
		padding: 9px;
		float: left;
	}
	.quiz_sec label span.picture_gender { margin-right: 20px; margin-left: 20px; }
	.quiz_sec label span.picture_age,
	.quiz_sec label span.picture_difficulty { margin-right: 0px; margin-left: 0px; }
	.quiz_sec .inner_main { padding-top: 20px; padding-left: 0px; padding-right: 0px; margin-left: 20px; margin-right: 20px; border: 0px solid red; }
	.crunching_center { width: 75%; }
}
@media (min-width: 992px) {
	.container, .container_top {
		width: 970px;
	}
	.choose_gender, .male, .female, .choose_difficulty { max-width: 790px; }
	.resizable_gender, .resizable_age, .resizable_difficulty { max-width: 245px; }
	.quiz_sec label span.picture_age,
	.quiz_sec label span.picture_difficulty,
	.quiz_sec label span.picture_gender { margin-right: 0px; margin-left: 0px; }
	.resizable_companion {
		max-width: 200px;
		padding: 15px;
	}
	.quiz_sec .inner_main { padding-top: 20px; padding-left: 0px; padding-right: 0px; margin-left: 100px; margin-right: 100px; border: 0px solid orange; }
	.crunching_center { width: 60%; }
}

@media (min-width: 1200px) {
	.container, .container_top {
//		width: 990px;
width: 1024px;
	}
}
@media (max-width: 1200px) {
	.address { display: none; border: 0px solid red; }
	.logo { width:100%; } 
}
@media (max-width: 991px) {
	.choose_gender, .male, .female, .choose_difficulty { max-width: 722px; }
	.quiz_sec label span.picture_age,
	.quiz_sec label span.picture_difficulty,
	.quiz_sec label span.picture_gender { width:208px; height:208px; }
	.quiz_sec label span.picture_companion { width:140px; height:140px; }
	.quiz_sec label { margin:0px; }

	#intro_left { float: none; max-width: 100%; }
	#intro_left h2 { font-size: 38px; }
	#intro_right { float: none; max-width: 100%; }
}
@media (max-width:767px) {
	body{background:none #fff;}
	h1{font-size:32px; line-height:40px;}
	h3{font-size:20px; margin-top:10px; }
	h4{font-size:16px; min-height:30px;}
	h5{font-size:13px; line-height:20px;}
	p{font-size:12px;}
	.top_header {height:auto; background:#fff; }
	.top_header {
		padding: 1em;
	}
	.top_header .container_top {
		padding-left: 0;
		padding-right: 0;
	}
	.main_wrapper{ margin-top:-20px; margin-bottom:0; }
	.choose_gender { margin-left: 4%; margin-right: 4%; }
	label.resizable_gender { max-width: 220px; }

	.quiz_sec label.resizable_gender { width:43%; margin-top: 0px; padding-top: 0px; padding-left: 2.5%; padding-right: 2.5%; }
	.quiz_sec label.resizable_age,
	.quiz_sec label.resizable_difficulty,
	.quiz_sec label.resizable_companion { width:36%; margin-top: 15px; padding-top: 0px; padding-left: 4%; padding-right: 4%; }
	.quiz_sec label span.picture_age,
	.quiz_sec label span.picture_difficulty,
	.quiz_sec label span.picture_gender,
	.quiz_sec label span.picture_companion { display: none; }
	.quiz_sec label img.gender,
	.quiz_sec label img.age,
	.quiz_sec label img.difficulty,
	.quiz_sec label img.companion { display: block; margin-left:auto; margin-right:auto; }

	.ui-progress-bar {
		height: 70px; overflow: hidden; position: relative; display: inline-block;
		background: #cacaca; width: 75%;
		border-top: 5px solid #cacaca; border-bottom: 5px solid #cacaca; float: left;
	}
	.ui-progress { height: 70px; position: absolute; left: 0; top: 0; background-color: #4d0c82; display: block; overflow: hidden; z-index: 1; border: none; }
	.crunching_center { width: auto; }

	#invitation, .phone_request, .thankyou { padding: 20px }
	.age_request, .height_request, .weight_request { padding: 14px }
	#invitation h3, .phone_request h3, .thankyou h3 { font-weight: bold; font-size: 20px; }
	#invitation h6, .phone_request h6, .thankyou h6 { font-size:17px; margin-bottom:15px; }

	.quiz_sec { box-shadow: none; }
	.checkbox-container { width: 80%; }
}
@media (max-width:567px) {

	.logo { text-align: center; padding: 10px 0; margin-bottom: 0px; border: 0px solid red; font-size: 2em; } 
	.top_header {
		padding: 0px;
	}
	.quiz_sec {
		padding-top: 0;
	}
	.quiz_sec h3 {
		font-size: 18px;
		padding-top: 20px;
		margin-bottom: 10px;
		margin-top: 1em;
	}
	.progress-bar {
		margin-top: 2em;
	}
	#thanks { margin-top: 2em; }
}
@media (max-width:480px) {

	.logo { font-size: 2.0em; margin-top: 0.5em; }
	#intro_left h2 { font-size: 34px; }
	#splash_separator { display: none; }
	.quiz_sec .inner_main {
		padding-top: 10px;
		padding-left: 0px;
		padding-right: 0px;
		margin-left: 15px;
		margin-right: 15px;
		border: 0px solid pink;
	}
	#crunching h1 { font-size:28px; line-height:34px; }
	.next_question_button {
		float: none; cursor: pointer; cursor: hand;
		max-width: 240px; min-width: 140px; padding: 10px;
		font-size: 1.8em;
	}
	.form_sec #submitButton, .form_sec .submitButtonPurple { font-size: 1.6em; margin:0 auto }
	.form_sec .initiate_survey.submitButtonPurple { width: 80%; }
	.form_sec #subscriberSubmit .submitButtonPurple { width: 80%; }
	h1.demo { font-size: 1.5em; color: #aaaaaa; margin-left: 2em; margin-right: 2em; margin-top: 1em; line-height: 1.4em; }

	.scenario_left  { width: 100%; border: 0px solid pink; }
	.scenario_right { width: 100%; border: 0px solid pink; }

	#pointer {
		margin-left:  2%;
		margin-right: 2%;
	}
	#bar {
		margin-left:  2%;
		margin-right: 2%;
	}
	#progress {
		width: 96%;
	}

	#intro_left h5 { font-size: 1.2em; }
	.form_sec .email,
	.form_sec .firstname,
	.form-sec .retakeid { font-size: 20px; }
	.checkbox-container { width: 70%; }
}
@media (max-width:380px) {

	#intro_left h2 { font-size: 28px; }
}

/* --------------------- */