html { 
	-webkit-text-size-adjust:none; 
	scroll-behavior: smooth;
	height: 100%;
	margin: 0; 
	padding: 0; 
}

body {
	background-color: #111;
	-webkit-appearance: none;
	height: 100%;
	margin: 0; 
	padding: 0; 
	font-family: "Josefin Sans",serif;
	line-height: 1.6em;
}

#page {
	margin-bottom: 0px;
}

#masthead {
	background: url(../assessment/bg-masthead.png) repeat-x bottom #fff;

}

#tailor {
	background: url(../assessment/bg-gradient-g.png) repeat-x bottom #fff;
	background-size: auto 270px;
	display: none;
}

	.caption {
		position: absolute;
		margin-left: 260px;
		margin-top: 15px;
	}

#patient {
	position: relative;
	width: 100%;
	height: 557px;
	display: none;
	overflow: hidden;
	background: linear-gradient(#b6becb, #eaeaea);
}

	#patient #patient-Joe {
		position: absolute;
		padding: 0px 0px 0px 0px;
		left: 50%;
		margin-left: 3000px;
		transition: all 0.25s ease;
	}
	
	#patient #patient-Jose {
		position: absolute;
		padding: 0px 0px 0px 0px;
		left: 50%;
		margin-left: 3000px;
		transition: all 0.25s ease;
	}
	
	#patient #patient-Beth {
		position: absolute;
		padding: 0px 0px 0px 0px;
		left: 50%;
		margin-left: 3000px;
		transition: all 0.25s ease;
	}
	
	#patient .patientCanvas {
		
	}
	
#flex {
	display: flex;
	flex-direction: column;
}

	#flex.flexHorizontal {
		flex-direction: row-reverse !important;	
	}

	#flex .flexDivGrow1 {
		flex-grow: 1;
		flex: 1;
	}

	#flex .flexDivGrow2 {
		flex-grow: 2;
		flex: 2;
	}

#module {
	width: 100%;
	display: none;
	background-color: #fff;
	box-shadow: 0px 0px 70px rgba(0,0,0,0.3);
	position: relative;
	z-index: 2000;
}

#control {
	position: relative;
	width: 100%;
	margin-top: 260px;
	z-index: 30000;
	transition: all 0.25s ease;
}


#canvas {
	width: 100%;
	position: relative;
	background-color: #fff;
	overflow: hidden;
	transition: all 0.25s ease;
	/* 	box-shadow: 0px 0px 20px rgba(0,0,0,0.10); */
	min-height: 1500px;
	margin: 0 auto;
	z-index: 40000;
}

	#canvas #tutorial {
		position: relative;
		margin: 0 auto;
		font-size: 21px;
		line-height: 32px;
		box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
		border: 1px dashed #ccc;
		padding: 20px 40px;
		margin-top: 80px;
		max-width: 1450px;
		min-width: 250px;
		width: calc(90% - 320px);
		min-height: 500px;
		text-align: center;
		z-index: 50000;
	}
	
		#canvas #tutorial.tutorialSmall {
			max-width: 500px;
			padding: 20px 160px 20px 40px;
		}
	
		#canvas #tutorial .tutorialImg {
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -80px;
			clear: both;
			vertical-align: baseline;
		}
		
	#results #tutorial {
		position: relative;
		margin: 0 auto;
		font-size: 21px;
		line-height: 32px;
		box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
		border: 1px dashed #ccc;
		padding: 20px 40px 20px 270px;
		margin-top: 80px;
		margin-bottom: 20px;
		max-width: 1450px;
		width: calc(90% - 320px);
		text-align: center;
		z-index: 50000;
	}

		
		#results #tutorial .tutorialImg {
			position: absolute;
			bottom: 0;
			left: 20px;
			clear: both;
			vertical-align: bottom;
		}


	#canvas #heading {
		
		box-shadow: 0px 0px 10px rgba(0,0,0,0.10);
	}
	
		#canvas #heading #wrap {
			padding: 20px;
		}
		
	#canvas #content {
		position: relative;
		width: 95%;
		max-width: 1000px;
		margin: 0 auto;
	}
	
		#canvas #content #Navigation_Right {
			position: absolute;
			display: none;
			font-size: 120px;
			right: 40px;
			margin-top: 180px;
			opacity: 0.2;
			cursor: pointer;
		}
		
		#canvas #content #Navigation_Left {
			position: absolute;
			display: none;
			font-size: 120px;
			left: 40px;
			margin-top: 180px;
			opacity: 0.2;
			cursor: pointer;
		}
		
	#canvas #assessment {
		width: 70%;
		max-width: 600px;
		margin: 0 auto;
		margin-top: 75px;
		border: 0px dotted #eaeaea;
		box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
	}
	
		#canvas #assessment #question {
			background-color: #eaeaea;
			padding: 25px;
			font-size: 21px;
			line-height: 32px;
			font-weight: normal;
		}
		
		#canvas #assessment #response {
			font-size: 21px;
			line-height: 32px;

			padding: 20px;
		}
		
	
#footer {
	background-color: #111;
	font-family: "Josefin Sans", sans-serif;
	bottom: 0px;
	width: 100%;
	padding: 25px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	color: #ccc;
}

#results {
	position: absolute;
	/*background: linear-gradient(#1b4829, #1b4829);*/
	background-color: #eaeaea;
	width: 100%;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
	height: 0px;
	overflow: hidden;
	transition: all 0.7s ease;
	z-index: 100000;
}


	#results .w, #results h5 {
		color: #000 !important;
	}
	
	#results .action {
		position: relative;
		display: none;
		z-index: 1000;
		width: 100%;
		box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
		border: 1px dashed #ccc;
		padding: 20px 20px;
		margin: 0 auto;
		margin-top: 20px;
		margin-bottom: 20px;
		font-family: "Josefin Sans", sans-serif;
		font-weight: bold;
		color: #000;
		font-size: 15px;
	}
	
		#results .resultTable {
			width: 80%;
			margin: 20px auto 0px auto;
			max-width: 970px;
		}
	
		#canvas .action ol {
			margin-left: 0px;
			padding: 20px;
		}
		
		
		#results .olStyle {
		}
		
			#results .olStyle {
				ounter-reset: my-awesome-counter;
				list-style: none;
			}
			
			#results .olStyle li {
				counter-increment: my-awesome-counter;
				margin: 0 0 0.5rem 0;
				position: relative;
			}
			
			#results .olStyle li::before {
				content: counter(my-awesome-counter);
				color: #000;
				font-size: 0.9rem;
				font-weight: bold;
				position: absolute;
				--size: 25px;
				left: calc(-1 * var(--size) - 15px);
				line-height: var(--size);
				width: var(--size);
				height: var(--size);
				top: 0;
				background: none;
				border-radius: 50%;
				text-align: center;
				box-shadow: 0px 0px 0 #999;
				border: 1px solid rgba(255,255,255,0.4);
			}
			
	#results #byline {
		margin-left: 39px;	
		opacity: 0.5;	
	}


#termsCheckBox {
	display: inline-block;
	background-color: #fff;
	width: 20px;
	height: 19px;
	margin-right: 15px;
	margin-bottom: 4px;
	vertical-align: middle;
}
	
.panel {
	padding-top: 30px;
}
	
.button {
	border: 1px dotted #ccc;
	text-decoration: none;
	padding: 10px 20px;
	font-weight: bold;
	text-transform: uppercase;
}

	.buttonWide {
		display: block;
		width: 275px;	
	}
	
	.buttonLarge {
		font-size: 20px !important;
		line-height: 20px;
		padding-top: 15px;
	}

.moduleCell {
	margin-bottom: 120px;
}
	
	.moduleCell img {
		padding: 20px 0px;
		height: 145px;
		transition: all 0.25s ease;
	}
	
		.moduleCell:hover img {
			padding: 10px 0px;
			height: 165px;
		}
	
	.moduleCell h2 {
		margin-top: 5px;
	}


.patientCell img {
	height: 321px;
	padding-top: 20px;
	transition: all 0.25s ease;
}

	.patientCell:hover img {
		padding-top: 0px;
		height: 341px;
	}
	
.patientCell:hover h4 {
	color: #7e1433 !important;
}

#divTerms, #divRole {
	display: block;
	height: 130px;
}


h1 {
	font-family: 'Josefin Sans', 'Josefin Sans', sans-serif;
	font-weight: normal;
	font-size: 40px;
}
	
h2 {
	text-transform: uppercase;
	font-size: 20px;
	margin-top: 30px;
}


h3 {
	font-family: "Josefin Sans";
	color: #fff;
	font-size: 40px;
	line-height: 45px;
	text-transform: uppercase;
	margin-top: 0px;
	margin-bottom: 10px;
}

	h3 span {
		display: block;
		font-size: 18px;
		line-height: 32px;
		letter-spacing: 2px;
	}
	
	h3 a {
		text-decoration: none;
		color: #fff;	
		transition: all 0.25s ease;
	}
	
		h3 a:hover {
			opacity: 0.7;
		}
		
		h3 a {
			text-decoration: none;
			border-bottom: 1px dashed #fff;
		}

	h3.g {
		color: #2e643f !important;
	}
		
		h3.g span {
			color: rgba(0,0,0,0.7);
			margin-top: 0px;
		}
	
	h3.r {
		color: #7e1433 !important;
	}
		
		h3.r span {
			color: rgba(0,0,0,0.7);
			margin-top: 10px;
		}


h4 {
	font-family: "Josefin Sans";
	color: #2e643f;
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 10px;
}

	h4 span {
		display: block;
		color: #646565;
		font-size: 13px;
		line-height: 18px;
		letter-spacing: 2px;
	}
	
h5 {
	font-family: "Josefin Sans";
	color: #fff;
	font-size: 20px;
	line-height: 30px;
	margin-top: 0px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: all 0.25s ease;
}


	h5:hover {
		opacity: 0.7;
	}
	
	h5 small {
		font-size: 15px;	
		border-bottom: 1px dashed #2a603b;
		white-space: nowrap;
		color: #2a603b;
	}

	
a.module {
	text-decoration: none;
	color: #333;
}
	
.bodytext {
	font-family: 'Josefin Sans';
	font-size: 21px;
	font-weight: bold;
	line-height: 32px;
	color: rgba(0,0,0,0.7);
	letter-spacing: 1px;
}

.pop {
	color: #7e1433;
}

.w {
	color: #fff !important;
}

.slideanim {
	visibility:hidden;
}

.slide {
    animation-name: slide;
    -webkit-animation-name: slide; 
    animation-duration: 0.9s; 
    -webkit-animation-duration: 0.9s;
    animation-timing-function: ease-out;
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}


@media only screen and (max-width: 1250px) {
	
	#page {
		margin-top: 50px;
		zoom: 90%;
	}

}


@media only screen and (max-width: 1100px) {
	
	#page {
		margin-top: 50px;
		zoom: 80%;
	}

}


@media only screen and (max-width: 1000px) {
	
	#page {
		margin-top: 50px;
		zoom: 70%;
	}

}