/* Survey V2 CSS - 09/07/19 */
section.module_hero 				{ display: none; }
header 								{ width: 100%; background-color:#fff; position: static; }
nav.utility 						{ max-width: 100%; text-align: right; }

.container.splash 					{ background-size: cover; text-align: center; }
.splash .module_text h1 			{ font: normal 500 3em/1 'IBM Plex Sans'; margin-top: 1.5em; text-transform: none; }
.splash .module_text h2 			{ font: normal 400 1.4em/1.4 'IBM Plex Sans'; padding: 0 18%; }
.splash .module_text h1, .splash .module_text h2
									{ color:#fff; }
.cards 								{ display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; justify-content: space-around; margin: 3em 0; }
.card		 						{ background-color:#e6e6e6; padding: 1.5em; max-width: 295px; width: 100%; text-align:center;}
.card img 							{ max-width: 35%; }
.card-flip 							{ display: none; }
.module_text .card h2 				{ color:#2d2d2d; font: normal 500 1.375em/1 'IBM Plex Sans'; margin: .7em 0; }
.module_text .card p 				{ color:#2d2d2d; font: normal 400 1.125em/1.4 'IBM Plex Sans'; width: 100%; }

section.module_survey 				{ margin: 0 auto 1em auto; max-width: 1080px; }
.module_survey p                    { color:#666; font-size: 20px; }
li.category							{ padding: 2em 0; display:none; } 
li.category:nth-child(3) 			{ /*margin-top: 100px;*/ display: block; }
.module_survey label			    { color:#666; font: normal 400 .85em/1.4 'IBM Plex Sans'; }
/* .module_survey h1 					{ font: normal 700 2.4375em/1 'bebas'; color: #00568c; text-transform: uppercase; } */
.module_survey h2, .results-page h2, .module_survey h1, .module_text h1 		
									{ font: normal 400 2.125em/1 'IBM Plex Sans'; color: #00568c; margin: 0 0 1em 0; text-transform: capitalize; }
.module_survey .question > h3		{ font: normal 400 26px/1.4 'IBM Plex Sans'; color: #2d2d2d; text-align: center; padding: 0 15%; margin-bottom: 1.5em; }
.module_survey ol > li 				{ color:#00568c; font: normal 700 1.25em/1 'IBM Plex Sans'; margin: 2em 0 1em 0; position:relative; }
.module_survey ol ul li 			{ margin: .8em 0; }
.module_text tr, .module_text th 	{ border-bottom: 0; }

.module_survey .question 			{ border-bottom: 2px #e8e8e8 solid; padding-bottom: 4em; margin-top: 4em; }
.question.reg ul 					{ width: 71%; margin:0 auto; }
.question.reg > h3					{ margin-bottom: 2em; }
.question.reg li 					{ position: relative; margin: 1.5em 0; }
.question.reg li label 				{ padding-left: 20px; width: calc(100% - 55px); display: inline-block; vertical-align: middle; }
.question.reg li span 			    { display: inline-block; vertical-align: middle; border-radius: 50%; background-color:#e8e8e8; width: 35px; height: 35px; }
.question.reg li:hover span   		{ border: 4px #00558C solid; cursor: pointer; }
.question.reg input					{ display: none; }
.question.reg input:checked + span  { background-color:#00558C; }
.module_survey .question.inline > ul, .question.dot > ul
									{ display:flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; justify-content: space-around; align-items: center; }
.question.boolean.dot > ul			{ justify-content: center; }
.module_survey .question.inline li, .question.dot li  
									{ position: relative; }
.question-description 				{ font-size: .8em; font-weight: 400; line-height: 1; }
.question-description p 			{ width: 77%; text-align: center; margin:0 auto 1em auto; }

/* BUBBLES and BOOLEAN */
.question.dot 						{ text-align: center; }
.question.dot ul 					{ margin:0 auto; width: 65%; }
.question.dot label 				{ display: none; color:#666; font: 400 normal 26px/1.2 'IBM Plex Sans'; max-width: 100px; }
.question.dot li span,.question.dot li.first-choice label,.question.dot li.last-choice label
									{ display: inline-block; }
.question.dot li.first-choice label, .question.dot li.last-choice label
									{ position: absolute; top: 50%; transform: translateY(-50%); }
.question.dot li.first-choice label
									{ right:140px; text-align: right; }
.question.dot li.last-choice label
									{ left: 140px; text-align: left; }
.question.dot li span 			    { border-radius: 50%; background-color:#e8e8e8; width: 75px; height: 75px; }
.question.dot li span:hover   
									{ border: 4px #00558C solid; cursor: pointer; }
.question.dot input 				{ display: none; }
.question.dot input:checked + span  { background-color:#00558C; }
.question.bubbles li.max span		{ width: 75px; height: 75px; }
.question.bubbles li.min span		{ width: 55px; height: 55px; }
.question.bubbles li.neutral span	{ width: 35px; height: 35px; }

.question.boolean.dot li 			{ margin: 0 2em; }
.question.boolean label				{ display: block; margin: 1em 0; }

/* BLOCKS */
.question.blocks h3 				{ font: normal 400 26px/1.4 'IBM Plex Sans'; color: #2d2d2d; text-align: center; padding: 0 15%; }
.question.blocks ul 				{ text-align: center; }
.question.blocks li 				{ border: 4px transparent solid; background-color:#e8e8e8; border-radius: 15px; text-align: center; width: 60%; margin:1em auto; }
.question.blocks li:hover 		    { border: 4px #00558C solid; cursor: pointer; }
.question.blocks li.block-select	{ background-color:#00558C; }
.question.blocks label 				{ display: block; padding: 1em; font: normal 400 18px/1.4 'IBM Plex Sans'; color: #2d2d2d; }
.question.blocks li.block-select label
									{ color:#fff; }
.question.blocks li span,.question.blocks li input[type=radio]			
									{ display: none; }

/* PROGRESS BAR */
nav .progress 						{ background: #fff; width: calc(100% - 100px); border: #00558C 2px solid; overflow: hidden; height: 22px; border-radius: 10px; margin: 0; }
nav .bar 							{ border: 2px #ffffff solid; background-color:#00558C; border-radius: 10px; height: 18px; width:3%; -webkit-transition: width .75s ease-in-out; -moz-transition: width .75s ease-in-out; -o-transition: width .75s ease-in-out; transition: width .75s ease-in-out;}
nav .bar:after 						{ background-color:#00558C; border:1px #00558C solid;  content:" "; float:right; display: block; height: 14px; width:9px; border-bottom-right-radius: 9px; border-top-right-radius: 9px; }
nav.nav-area 						{ display: none; max-width: 1000px; width: 50%; }
.page-tools.survey.stuck  nav.nav-area			
									{ display:block; position: fixed; top:5px; z-index: 2; padding: 1em; left: 50%; transform: translateX(-50%); }
nav.fix .progress 					{ margin:0; }
nav.nav-area span 					{ float:left; color:#00558c; font-size: 26px; width:75px; margin: -5px 20px 0 0; line-height: 1.3; text-align: right; }

.module_survey button, a.next, a.prev, input[type="submit"], input.submit-survey	
									{ border-radius: 2px; background-color:#00568c; color:#fff; padding: 12px 65px; font: normal 400 1em/1 'IBM Plex Sans'; cursor: pointer; }
input[type="submit"], input.submit-survey 
									{ border-radius: 0; }
.module_survey button:disabled, a.button.disabled, .module_survey nav.nav-area a.button.disabled, input.submit-survey:disabled
									{ background: #e8e8e8; color:#666666; cursor: default; }
input.submit-survey 				{ outline: none; border:0; margin-top: 30px; }
a.next 								{ float: right; }
a.prev 								{ float: left; }
a:not(.disabled).next:hover, a:not(.disabled).prev:hover
									{ background-color: #666666; }
.module_survey a.button.home  		{ margin-right: 35px; }
.module_survey .pardot-container    { width: 75%; }

/* user form */
#form_survey .container				{ position: relative; padding: 3em 0; }
#form_survey .container.active 		{ background-color: #00568c; }
#form_survey .container.active:before { width: 100%; height:300px; content:""; display: block; position:absolute; left:0; top:0; background-color:#ffffff; z-index: 0; }
.user-fields-form 					{ width: calc(90% - 300px); float:left; display: none; }
.form-fields-column 				{ background-color:#e5e5e5; padding: 1em; }
.user-fields h2, .user-fields p 	{ width:85%; }
.user-fields p 						{ color:#666666; }
.user-fields input, .user-fields textarea, .user-fields select, .user-fields label 
									{ font-size: 16px; font-family: 'IBM Plex Sans', sans-serif; color: #808080; }
.user-fields input.submit-survey 	{ color:#fff; letter-spacing: 1px; }
.user-fields .col 					{ width: 48%; display: inline-block; }
.user-fields .col:nth-child(odd) 	{ margin-right: 2%; }
.user-fields .full-col 				{ width: 100%; display: block; }
.user-fields .form-field   		    { margin: 26px 0 0 0; position: relative; }						 
.user-fields .field-wrap 			{ position: relative; display: block; width: 100%; }
.user-fields .check-field 			{ position: relative; margin: 26px 0 0 0; cursor: pointer; }
.user-fields input[type="text"]
									{ width: 100%; height: 42px; padding: 0 15px; font-size: 16px; color:#808080; background: #ffffff; border: 1px solid #e7e7e7; }
.user-fields input[type="text"]:focus,
.user-fields textarea:focus 		{ outline: none !important; border-color: #71C5E8; }
.user-fields .form-field label 		{ position: absolute; top: 10px; left: 15px; padding: 0 4px; color: #808080; pointer-events: none; width: auto; max-width: -webkit-calc(100% - (2*8px)); max-width: calc(100% - (2*8px)); overflow: hidden; text-overflow: ellipsis; -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1); transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1); white-space: nowrap; z-index: 1; }

.user-fields .on-focus label,
.user-fields .has-value label 		{ color: #71C5E8; -webkit-transform: scale(.75) translateY(-40px) translateX(-25px); transform: scale(.75) translateY(-40px) translateX(-25px); }
.has-value:not(.on-focus) label 	{ color: #808080; }

.user-fields select 				{ display: block; padding: .6em 1.4em .5em .8em; width: 100%; max-width: 100%;  box-sizing: border-box; margin: 0; border: 1px solid #E7E7E7; box-shadow: 0 1px 0 1px rgba(0,0,0,0); border-radius: .083em;/*.5em;*/ -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23808080%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#ffffff 100%); /*808080*/ background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; }
.user-fields select 				{ font-size: 15px; }
.user-fields select::-ms-expand 	{ display: none; }
.user-fields select:hover 			{ border-color: #E7E7E7; }
.user-fields select:focus 			{ border-color: #71C5E8; box-shadow: 0 0 1px 1px rgba(105, 197, 244, 1); box-shadow: 0 0 0 1px -moz-mac-focusring; color: #808080; outline: none; }
.user-fields select option 			{ font-weight: normal; font-size: 15px; }

.user-fields input[type="checkbox"] { width: 25px; height: 25px; position: absolute; left:0; top:0; visibility: hidden; opacity: 0; -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; appearance: checkbox !important; }

.user-fields input[type="checkbox"] ~ .check-label:before 
									{ content: ""; position: absolute; top: 0; left: 0; width: 25px; height: 25px; background: #fff; border: 1px solid #E7E7E7; }
.user-fields input[type="checkbox"]:hover ~ .check-label:after,
.user-fields input[type="checkbox"]:checked ~ .check-label:after 
									{ content: "\2715"; position: absolute; top: -3px; left: 3px; width: 20px; height: 20px; color: #808080; font-size: 22px; opacity: .5; z-index: 1; }
.user-fields input[type="checkbox"]:checked ~ .check-label:after 
									{ opacity: 1; }
.user-fields .check-label 			{ vertical-align: middle; font-size: 14px; position: relative; padding-left: 32px; }
.user-fields .field-valid 			{ padding: 0 !important; margin: 0 !important; color: #d00; font-size: 12px; line-height: 145%; position: absolute; left:0; bottom:-13px; }

.module_survey .lead-form, .module_survey .results
									{ display: block; }

.results-page-teaser 				{ padding: 2em 2em 1em 2em; color:#666666; text-align: center; position: absolute; right:20px; top:0; background-color:#e5e5e5; width: 300px; z-index:100;}
.results-page-teaser h2 			{ color: #4d4d4d; font-weight: 700; font-size: 1.2em; padding: .5em 0; margin:0; width: 100%; }
.results-page-teaser span 			{ color:#00568c; display: block; font-weight: 700; font-size: 2em; padding: .25em 0; }
.results-page-teaser p 				{ text-align: left; font-size: .9em; width: 100%; }
a.take-survey,a.btn                 { background-color:#fff; border-radius: 2px; border: 2px #fff solid; display: inline-block; font: 600 normal 1.125em/1 'IBM Plex Sans'; padding: .8em 1em; }
a.btn 								{ background-color:#00568c; }
a.take-survey:hover, a.btn 			{ color:#ffffff; }
a.take-survey:hover 				{ background-color: transparent; border: 2px #fff solid; }
.survey-loader 						{ display: none; width: 100%; text-align: center; position:fixed; padding:0; margin:0; top:0; left:0; width: 100%; height: 100%; background:rgba(255,255,255,0.6); z-index: 100; }
.survey-loader-box 				    { position: absolute; left: calc(50% - 100px); top: calc(50% - 100px); text-align: center; width: 200px; }
.survey-loader-box:after 			{ content: 'Generating Your Report'; font-size:.75em; display: block; }
.survey-loader.restore .survey-loader-box:after 	
									{ content: 'Checking for Previous Progress'; }
.pardot-placeholder, .privacy-terms-box, .pdf-results-page, .results-page-teaser, .results-page
									{ display: none; } 

.results-page p, .results-page li 	{ color:#2d2d2d; font-size: 1.25em; }

.contact-us 						{ text-align: center; display: none; }
.contact-us h2 						{ color:#00568c; font: normal 700 2.75em/2 'IBM Plex Sans'; }
.contact-us a.callout 				{ margin-top: 2em; display: inline-block; }

.privacy-terms-box 					{ font-size: .85em; }
.privacy-link, .privacy-terms-box a { text-decoration: underline; }

/* reach form styles */
#RFDisplayFrame h3                  { text-transform: uppercase; margin: 0;font-weight:bold;padding:0; color:#808080; font-size: .6em; }
#RFDisplayFrame hr                  { margin:5px; }
#RFDisplayFrame .divCompName        { font-weight: bold; color:#808080; }
#RFDisplayFrame.divDisplayFrame     { border-color: #00568c; border-width: 1px !important; border-style: outset !important; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background-color: #ffffff !important; font-family: 'IBM Plex Sans', sans-serif !important; /*top:auto !important; position:fixed !important; bottom:25px !important;*/}
#RFDisplayFrame .tabCompTD { border-bottom: solid 1px #71C5E8 !important; padding: 7px 2px !important; }
#RFBlockFrame.divBlockFrame { background-color:#FFFFFF !important; background-image: none !important;}

/* donut result screen */
.overalls 							{ display: flex; }
.overall-score-donut 				{ max-width: 300px; }
.overall-score-donut h2 			{ color:#00558C; text-align: center; margin-bottom:0; font-size: 26px; }
.overall-score-donut p 				{ font: normal 400 18px/28px 'IBM Plex Sans'; padding: 0 3em; }
.overall-detail 					{ width: 60%; }
.overall-detail p 					{ color:#2d2d2d; font: normal 400 18px/28px 'IBM Plex Sans' !important; }
.overall-detail p strong 			{ font-weight: 700; color:#00568c; }
.overall-compare 					{ border-left: #00558c 2px solid; background-color:#e6e6e6; padding: 2.5em; margin-bottom: 2em; }
.overall-compare h3 				{ font: normal 400 26px/32px 'IBM Plex Sans'; color:#00568c; }
.overall-compare .bar 				{ display: flex; margin: 1em 0; }
.overall-compare .bar .value 		{ font-size: .75em; }
.overall-compare .bar .value span	{ display:block; font: normal 700 2.75em/1 'IBM Plex Sans'; }
.overall-compare .bench-score.bar 	{ color:#71C5E8; margin-top:0; }
.overall-compare .bench-score.bar-value { background-color:#435667; }
.overall-compare .bar .bar-score 	{ width: 85%; height: 15px; margin:20px auto 0 auto; background-color:#fff; }
.overall-compare .bar .bar-value 	{ height: 15px; }
.overall-compare .your-score .bar-value { background-color:#ce4b99; }
.overall-compare .your-score .value { color:#ce4b99; }
.overall-compare .bench-score.bar .bar-value { background-color:#71C5E8; }
.overall-compare .bar .value 		{ text-align: right; width: 10%; }
.overall-compare .score-legend 		{ display: flex; font-size: .75em; width: 84%; margin-left: 14%; justify-content: space-between; }
.average-category-benchmark 		{ display: flex; justify-content: space-between; margin: 2em 0; }
.average-category-benchmark .category-average { font: normal 400 1.8em/1 'IBM Plex Sans'; border-right: 1px solid #000; padding-right: 5.5%; }
.average-category-benchmark .category-average:last-child { border-right: none; }
.average-category-benchmark span 	{ font: normal 700 3.5em/1 'IBM Plex Sans'; display: block; }
.donut-wrapper 						{ position: relative; height: 280px; min-width: 300px;}
.donut-wrapper .center-label 		{ color:#2d2d2d; font: normal 400 26px/32px 'IBM Plex Sans'; top: 49%; left: 50%; transform: translate(-50%, -50%); position:absolute; text-align: center; }
.donut-wrapper .score 				{ font-size: 60px; font-weight: 600; font-family: 'IBM Plex Sans'; display: block; line-height: 48px; }
.donut-row 							{ display: flex; margin: 1em 0 2em 0; }
.donut-row .category-benchmark 		{ font-size:14px; color:#595959; text-transform: uppercase; margin-top: -10px; text-align: center; }
.category-donut-detail 				{ padding-left: 2.5em; }
.category-donut-detail h3 			{ color:#00568c; font: normal 400 26px/32px 'IBM Plex Sans'; margin-top: 20px; }
.category-donut-detail h4 			{ font: normal 400 1.25em/1 'IBM Plex Sans'; margin: .85em 0; }
.category-donut-detail p 			{ font: normal 400 18px/28px 'IBM Plex Sans'; border-bottom: 2px #f4f4f4 solid; padding-bottom: 1.5em; }
.category-donut-detail li 			{ font: normal 400 18px/28px 'IBM Plex Sans'; }
.category-donut-detail p:last-child { border-bottom: none; }

@media only screen and (max-width: 60em) 		/* 800px */
{
	.results-page-teaser 			{ right: auto; width: 100%; position: static; padding: 1em 1em 0 1em; margin: 2em 0 1em 0; }
	.teaser-titles 					{ width: 35%; float:left; margin-right: 15px; }
	.user-fields-form 				{ width: 100%; float: none; background-color:#fff; padding: 1.5em; }
	.user-fields p 					{ padding: 2em 0; }
	.results-page-teaser p 			{ padding: 1em 0; margin-bottom:0; }
	.teaser-detail:after 			{ clear: both; content: "";
		display: table;}
	nav.nav-area.fix 				{ left:0; }

}

@media only screen and (max-width: 37.5em) 		/* 600px */
{
	.module_hero #titlefade.hero_text { width: 100%; }
	.module_hero #titlefade.hero_text.nocolor_dash h1, .module_text h2.bottom-dash { font-size:1.7em; }
	.user-fields h2					{ margin:0; width: 100%; font-size: 1.5em; }
	.results-page-teaser h2         { font-size: 1em; }
	li.category:nth-child(3) 		{ margin-top: 20px; }
	.module_survey .question 		{ margin-top: 2em; }
	.module_survey .question.inline > ul { flex-wrap: wrap; }
	.module_survey .question.inline li { width: 50%; }
	.module_survey ol > li { list-style-type: none; }
	.module_survey .module-select ul li { width: 50%; }
	.results-grid thead th, .results-grid tbody th { font-size: .65em; }
	.splash .module_text h2 		{ padding: 0 5%; }
	.cards 							{ flex-direction: column; text-align: center; }
	.cards .card 					{ margin: 1em 0; width: 100%; max-width: none; text-align: left; padding: 1em; }
	.cards .card h2 				{ font-size: 1.25em; margin-top: 1em; margin-left: 30%; padding:0; width: 70%; }
	.cards .card p 					{ font-size: 1em; margin-left: 30%; width: 70%; }
	.card img 						{ float: left; margin: 5% 5% 5% 0; width: 25%; }
	.question.dot ul                { width: 100%; }
	.question.reg > h3,.question.blocks h3
					 				{ padding: 0 8%; }
	.question.reg ul 				{ width: 90%; }
	.question.blocks li 			{ width: 80%; }
	.question.dot li.first-choice label
									{ top: 100px; left: 0; right:auto; text-align: center; }
	.question.dot li.last-choice label
									{ top: 100px;left:auto; right:0; text-align: center; }
	.user-fields .col 				{ width: 100%; display: block; }
	.user-fields input.submit-survey{ padding: 1em; width: 100%; }
    a.next, a.prev 					{ padding: 1em 2em; }
	.overall-score-donut,.overall-detail 	
									{ width: 100%; }
	.overall-detail 				{ margin-top: 20px; }
	.overall-compare .bar .bar-score{ width: 75%; }
	#form_survey .container.active 	{ background-color: transparent; }
}

@media only screen and (max-width: 28em) 		/* 400px */
{
	.question.bubbles li.max span 	{ width: 50px; height: 50px; }
	.question.bubbles li.min span 	{ width: 40px; height: 40px; }
	.question.bubbles li.neutral span 	{ width: 30px; height: 30px; }
}