.learningObjectives {
	margin-bottom: 20px;
}
.learningObjectives h3 {
	color: #3D64A6;
	text-align: center;
	margin: 0 0 .5em;
}
.textWidget,
.accordionWidget,
.tabWidget,
.quickQuiz,
.caseStudy {
	margin: 20px auto;
	max-width: 960px;
	padding: 40px;
	border-radius: 8px;
}
.textWidget h3,
.accordionWidget h3,
.tabWidget h3,
.quickQuiz h3,
.caseStudy h3 {
	text-align: center;
	color: #333;
	size: 18px;
}
.textWidget .note,
.accordionWidget .note,
.tabWidget .note,
.quickQuiz .note,
.caseStudy .note {
	background-color: #FFFDBA;
	padding: 20px;
	margin-top: 20px;
}
.textWidget .note h4,
.accordionWidget .note h4,
.tabWidget .note h4,
.quickQuiz .note h4,
.caseStudy .note h4 {
	text-align: center;
	margin: 0 0 .5em;
	text-transform: uppercase;
}
.textWidget .note h4 p,
.accordionWidget .note h4 p,
.tabWidget .note h4 p,
.quickQuiz .note h4 p,
.caseStudy .note h4 p {
	color: #333;
}
.textWidget .note h4,
.accordionWidget .note h4,
.tabWidget .note h4,
.quickQuiz .note h4,
.caseStudy .note h4 {
	color: #E0A63F;
	text-transform: uppercase;
	text-align: center;
	font-size: 18px;
	margin: .25em 0;
	letter-spacing: 4px;
}
.textWidget > h2,
.accordionWidget > h2,
.tabWidget > h2,
.quickQuiz > h2,
.caseStudy > h2 {
	height: 100px;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 22px;
	text-align: center;
	letter-spacing: 5px;
	margin-top: 0;
	color: #333;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px;
}
.recommendedCourses,
.resources,
.aboutSTEPS {
	overflow: auto;
	padding: 20px 0;
	border-top: dotted 1px #D87900;
	margin: 20px 0;
}
.recommendedCourses h3,
.resources > h3,
.aboutSTEPS h3 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}
.courseTile,
.resourceTile {
	background-color: #ebebeb;
	padding: 16px;
	margin: 20px 0;
}
h3.course-type,
h4.course-type {
	text-align: left;
	text-transform: uppercase;
	color: #333;
	font-size: 10px;
	font-weight: 300;
	margin: 0 auto 10px;
}
.courseTile p {
	font-size: 13px;
	margin: 10px 0;
}
.courseTile .credit {
	text-transform: uppercase;
}
.courseTile .title {
	padding-top: 14px;
	border-top: dotted 1px #959595;
	display: table;
	width: 100%
}
.courseTile .title img {
	display: table-cell;
	width: 85px;
	margin: 0;
}
.courseTile .title h4,
.courseTile .title h3 {
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	width: 70%;
	height: 85px;
}
.courseTile a {
	display: block;
	text-align: center;
	font-weight: 300;
	color: #305390;
	text-transform: uppercase;
	text-decoration: underline;
}
.resourceTile {
	background-repeat: no-repeat;
	background-position: 16px 16px;
	background-size: 30px;
	text-align: center;
}
.resourceTile .title {
	margin-left: 45px;
}
.resourceTile h4,
.resourceTile h3 {
	color: #333;
	margin: 0 0 .5em;
	font-size: 13px;
	text-decoration: none;
}
.resourceTile p {
	font-size: 13px;
	text-align: left;
}
.resourceTile a {
	text-transform: uppercase;
	color: #3D64A6;
	text-decoration: underline;
}
.website {
	background-image: url("icons/icon-website.svg");
}
.document {
	background-image: url("icons/icon-document.svg");
}
.STEPStile {
	background-color: #E7DEF0;
	padding: 20px;
	overflow: auto;
	margin: 20px 0;
	border-radius: 4px;
}
.STEPStile p {
	font-size: 14px;
	list-style: 1.4;
}
.STEPStile .description {
	width: 37%;
	float: left;
	overflow: auto;
}
.STEPStile .video {
	width: 60%;
	float: right;
}
.right {
	float: right;
	width: 48%;
}
.left {
	float: left;
	width: 48%;
}
@media only screen and (max-width: 599px) {
	.right {
		float: left;
		width: 100%;
	}
	.left {
		float: left;
		width: 100%;
	}
	.textWidget,
	.accordionWidget,
	.tabWidget,
	.quickQuiz,
	.caseStudy {
		margin: 10px auto;
		max-width: 960px;
		padding: 10px;
	}
	.courseTile {
		min-height: inherit;
		margin-bottom: 20px;
	}
	.STEPStile {
		padding: 10px;
		margin: 10px 0;
	}
	.STEPStile .description {
		width: 100%;
		float: left;
	}
	.STEPStile video {
		width: 100%;
		float: left;
	}
}
.quickQuiz,
.caseStudy {
	background-color: #EECC8B;
}
.quickQuiz h2,
.caseStudy h2 {
	background-image: url("icons/icon-quickQuiz.svg");
}
.scenario {
	width: 70%;
	float: left;
	margin-bottom: 40px;
}
.scenario h3 {
	text-align: left;
}
.scenario p {
	font-size: 18px;
	line-height: 1.4;
}
.profile {
	width: 28%;
	float: right;
}
.profile img {
	width: 120px;
	display: block;
	margin: 0;
}
.profile p {
	font-weight: 700;
	font-style: italic;
	margin-bottom: .5em;
}
.profile p span {
	font-weight: 300;
	font-style: normal;
}
.quizQuestion {
	background-color: rgba(255, 255, 255, 0.8);
	padding-top: 20px;
}
.quizQuestion > p {
	font-size: 16px;
	text-align: center;
	font-weight: 600;
}
.quizQuestion .choices {
	text-align: center;
	margin: 0;
}
.quizQuestion button {
	display: inline-block;
	font-family: "Merriweather Sans", sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 700;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: #FFF;
	font-size: 14px;
	min-width: 130px;
	margin: 0px 5px;
	padding: 12px;
}
.quizQuestion button.true {
	background-color: #8E9C62;
}
.quizQuestion button.true:hover {
	background-color: #737B51;
}
.quizQuestion button.false {
	background-color: #D3755E;
}
.quizQuestion button.false:hover {
	background-color: #B56755;
}
.quizQuestion button.sometimes {
	background-color: #D17633;
}
.quizQuestion button.sometimes:hover {
	background-color: #B46736;
}
.incorrect,
.correct {
	margin: 10px;
	border-radius: 8px;
	padding: 80px 20px 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 30px;
	background-size: 40px;
	display: none;
}
.incorrect h4,
.correct h4 {
	text-align: center;
	margin: 0 0 .5em;
	font-size: 18px;
}
.incorrect p,
.correct p {
	text-align: left;
	margin: .5em 0 0;
}
.incorrect {
	background-color: #F3D2D2;
	background-image: url("icons/icon-quiz-incorrect.svg");
}
.incorrect h4 {
	color: #BB404E;
}
.correct {
	background-color: #D6E1CC;
	background-image: url("icons/icon-quiz-correct.svg");
}
.correct h4 {
	color: #59783E;
}
@media all and (max-width: 600px) {
	.quickQuizContainer {
		padding: 10px;
	}
	.quickQuizContainer h2 {
		font-size: 16px;
		margin-bottom: 10px;
	}
	.scenario {
		width: 100%;
		margin-bottom: 10px;
	}
	.profile {
		width: 100%;
		float: left;
		margin-bottom: 10px;
	}
	.profile img {
		width: 100px;
		display: block;
		margin: 0 auto 10px;
	}
	.profile p {
		text-align: center;
		font-size: 14px;
	}
	.profile p span {
		font-weight: 300;
		font-style: normal;
	}
	.quizQuestion {
		padding: 20px 10px 10px;
	}
	.quizQuestion button {
		display: block;
		margin: 10px auto;
	}
	.quickQuizTrue,
	.quickQuizFalse {
		margin: 30px auto;
	}
	.scenario p,
	.quizQuestion p,
	.quickQuizIncorrectFeedback p,
	.quickQuizCorrectFeedback p {
		font-size: 14px;
	}
	.quickQuizCorrectFeedback h3,
	.quickQuizIncorrectFeedback h3,
	.alert h4 {
		font-size: 16px;
	}
	.quickQuizCorrectFeedback,
	.quickQuizIncorrectFeedback {
		padding: 10px;
	}
}

/*table*/

// Landscape phone to portrait tablet
@media (max-width: 767px) {
	table,
	thead,
	tbody,
	th,
	td,
	tr {}
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	tr {
		border: 1px solid #ccc;
		display: table-row;
	}
	th {
		display: table-cell;
	}
	td {
		display: table-cell;
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
		white-space: normal;
		text-align: left;
	}
	td:before {
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: left;
		font-weight: bold;
	}
}
.theme-color-orange .question .option-number {
	display: none;
}
.btn-select.selected {
	display: none;
}
.opioid-question-title {
	font-size: 16px;
	font-weight: 600;
}
.widget-quiz .question-group {
	padding: 20px 20px 5px;
}
.widget-quiz .feedback {
	border-radius: 6px;
	padding: 20px;
	text-align: left;
	margin-bottom: 20px;
}

/*opioid facts slideshow*/

.opioid-fact-number {
	display: block;
	margin: 0 auto;
	font-size: 60px;
}
/*provider actions slideshow*/

/*slides*/

.case-nav {
	width: 150px;
	margin: 20px auto 0;
	overflow: auto;
}

.case-nav button.next, .case-nav button.back {
	height: 40px;
	width: 40px;
	border-radius: 100%;
	background-color: #D57724;
	color: #FFF;
	border: none;
	display: block;
	font-weight: 800;
}
.case-nav button.next {
	float: right;
}
.case-nav button.back {
	float: left;
}
.action-container {
	background-color: #F7D4B1;
	padding: 10px;
}
.provider-action,
.provider-action-selected,
.action-prompt {
	padding: 10px;
	margin: 10px;
	background-color: #FDF6EF;
}
.discover-button {
	display: block;
	cursor: pointer;
	margin: 0 auto 20px;
	text-decoration: none;
	background-color: #D57724;
	padding: 12px;
	text-align: center;
	width: 160px;
	color: #FFF;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	font-family: "Merriweather Sans", sans-serif;
	font-weight: 700;
	border: none;
	border-radius: 0;
}
.provider-action {
	background-image: url("images/action-neutral.svg");
	background-repeat: no-repeat;
	background-size: 28px;
	background-position: 15px center;
	display: none;
	opacity: 0.4;
}
.provider-action-selected {
	background-image: url("images/action-selected.svg");
	background-repeat: no-repeat;
	background-size: 28px;
	background-position: 15px center;
	display: none;
	opacity: 1;
}
.provider-action p,
.provider-action-selected p {
	margin-left: 50px;
}
.show-action-list {
	animation-duration: 2s;
	animation-name: reveal-actions;
	display: block;
}
@keyframes reveal-actions {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0.4;
	}
	60% {
		opacity: 0.4;
	}
	100% {
		opacity: 0.4;
	}
}
.show-action-selected {
	animation-duration: 3s;
	animation-name: reveal-actions-selected;
	display: block;
}
@keyframes reveal-actions-selected {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}