/* ! -----[ Global ]---------------------------------------------------------------------------- */

*{
	margin: 								0;
	padding: 								0;
	outline:								0;
	border:									0;
	font-size: 								100%;
	line-height: 							1;
	-webkit-tap-highlight-color: 			rgba(0,0,0,0);
}

*, 
*:before, 
*:after {
  -moz-box-sizing: 							border-box; 
  -webkit-box-sizing: 						border-box; 
  box-sizing: 								border-box;
}

html{
	margin: 								0;
	padding: 								0;
	overflow: 								hidden;
}

/* ! --------------------------------------------------------------------------------- */

html,body{
	height: 								100%;
}
.autoHeight{
	height: 								auto;
}
body{
	font-family: 		sans-serif;
	background-color: 	white;
    position: 			relative;
	overflow-x: 		hidden;
	overflow-y: 		auto;
	
}
.bodybg{
	background-image: 	url('../img/bg/loginBackground_tranquil1-2046x1150.jpg');
	background-size: 	cover;
	background-repeat: 	no-repeat;
}
.noscroll{
	overflow-y: 		hidden;
}
.puzzleBodyMaxW{
	max-width: 			800px;
	text-align: 		center;
	margin-left: 		auto;
	margin-right: 		auto;
}
.setupFormBodyMaxW{
	max-width: 			800px;
	text-align: 		center;
	margin-left: 		auto;
	margin-right: 		auto;
}

.mainWrapper1Backfill{
	
	background:					white;
	padding: 					0.7em 0.3em 0.7em 0.3em;
	position: 					absolute;
	top:						16em;
	right: 						3em;
	bottom:						0;
	left: 						3em;
	box-shadow: 				0 0 10px 3px rgba(0, 0, 0, 0.27);
}
.mainWrapper1{
	
	font-family: 	'Asap', "Lucida Grande", sans-serif;
	margin: 5em 3em 0 3em;
	position: relative;
}
.mainContentHeader{
	text-align: 				center;
	font-size: 					3.6em;
	background-color: 			#54524d;
	padding: 					0.7em 0.3em 0.7em 0.3em;
	border-radius: 				0.2em 0.2em 0 0;
	/*margin-bottom: 			0.2em;*/
	box-shadow: 				0 0 10px 3px rgba(0, 0, 0, 0.27);
}
.mainContentHeaderImageContainer{
	background-image: 		url('../img/svg/stepstone_logo_whiteText.svg');
	background-repeat: 		no-repeat;
	background-size: 		contain;
	background-position: 	center center;
    height: 				1.7em;
}
.mainContent{
	background-color: 	white;
	position: 			relative;
	padding-top: 		2em;
	padding-bottom: 		2em;	
}
.mainContentInner{
	max-width: 			60em;
	text-align: 		center;
	margin-left: 		auto;
	margin-right: 		auto;
}
#mainContentFooterElements2 a{
	text-decoration: none;
	color: rgb(7, 103, 107);
}
/* ! --------------------------------------------------------------------------------- */

.mainInstruct{
	font-size: 		1.1em;
	padding: 		1.4em 2em 0 2em;
	line-height: 	1.4em;
	text-align: 	left;
}
.emailAddyForm{
	margin-left: 		auto;
	margin-right: 		auto;
}
.formbut1.buttonDisabled{
	opacity: 0.2;
	cursor: default;
}
.reactionNotice{
	margin-top: 1em;
	margin-left: 1.8em;
	color: #cd391b;
}
.formbut1{
	background: #e07a7a;
}

#mainContentFooter{
	/*position: 										absolute;
	bottom: 										0;*/
	padding-top: 									3em;
	margin-left: 									auto;
	margin-right: 									auto;
	text-align: 									center;
}
#mainContentFooterElementsCenterer{
	display: 										inline-block;
}
#mainContentFooterElements{
	/*
	height: 										3.5em;
	max-height: 									3.5em;
	margin-bottom: 									2em;
	*/
	
}
#mainContentFooterElements2{
	margin-bottom: 								1em;
}
.mainContentFooterElement{
	display: 											inline-block;
	white-space : 								nowrap;
}
.mainContentFooterLogo{
	margin: 											0 1em 2em 1em;
	cursor: 											pointer;
	opacity: 										0.75;
	transition:										0.35s opacity;
	height: 										3.5em;
	max-height: 									3.5em;
}
.mainContentFooterLogo:hover{
	opacity: 										1;
}
.mainContentFooterLogo-ATM{
	background-image: 						url('../img/svg/logo_atm-maroon.svg');
	background-repeat: 						no-repeat;
	background-size: 							contain;
	background-position: 						center center;
	width: 											300px;
	/*height: 											100%;*/
}
.mainContentFooterDivider{
	background: 									rgba(255, 255, 255, 0.5);
	width: 											1px;
	height: 										100%;
}
.mainContentFooterDividerAlt1{
	padding-left: 							1em;
	padding-right: 							1em;
}
.mainContentFooterLogo-CET{
	background-image: 						url('../img/svg/logo_cet-color.svg');
	background-repeat: 						no-repeat;
	background-size: 							contain;
	background-position: 						center center;
	width: 											300px;
	/*height: 											100%;*/
}

/*****************************/

.mainContentInnerFullWidth.mainContentInnerFullWidth{
	max-width: 			100%;
	/*text-align: 		center;
	margin-left: 		auto;
	margin-right: 		auto;*/
}

.mainContentBGImageLeft1{
	background-image: 						url('../img/helpSystem/svg/bgshapes1_left.svg');
	background-repeat: 						no-repeat;
	background-size: 						contain;
	background-position: 					center center;
	width: 									240px; /*300px;*/
	height: 								400px; /*500px;*/
	position: 								absolute;
	top: 									0;
	left: 									0;
}
.mainContentBGImageRight1{
	background-image: 						url('../img/helpSystem/svg/bgshapes2_right.svg');
	background-repeat: 						no-repeat;
	background-size: 						contain;
	background-position: 					center center;
	width: 									240px; /*300px;*/
	height: 								400px; /*500px;*/
	position: 								absolute;
	top: 									-0.8em; /*0;*/ /* unsure of why needs to be adjusted, but there is top gap if not */
	right: 									0;
}
.mainContentBlockContainer{
	
}
.mainContentBlock{
	position: 	relative;
	max-width: 400px;
	text-align: 		center;
	margin-left: 		auto;
	margin-right: 		auto;
	color: 				#6f6f6f;
	
	font-size: 			1.2em;
}
.mainContentBlock *{
	line-height: 		1.4em;
}
[data-contentBlock="topBlock"]{

}
[data-contentBlock="topBlock"] .mainContentBlock{
	background: rgba(255, 255, 255, 0.9);
	padding-top: 		2em;
}
[data-contentBlock="featureBlock"]{
	background: 		rgba(207, 237, 236, 0.66); /*#e6f4f3;*/
}
[data-contentBlock="featureBlock"] .mainContentBlock{
	max-width: 80%;
}
.mainContentBlockHeaderText{
	font-size: 			2.3em;
	color: 				#408a96;
	padding-top: 		1em;
	padding-bottom: 		1em;
}
.mainContentBlockSection{
	position: relative;
	padding-bottom: 	3em;
}
.mainContentBlockSectionBlock{
	
}
[data-contentBlock="topBlock"] .mainContentBlockSectionBlock{
	text-align: left;
	padding-left: 		15px;
	padding-right: 		15px;
}
[data-contentBlock="topBlock"] .mainContentBlock{
	max-width: 800px;
}

.mainContentBlockSectionBlockSplitX2{
	
}
.mainContentBlockSectionBlockSplitP1{
	position: 	absolute;
	width: 		350px;
}
.mainContentBlockSectionBlockSplitP2{
	/*
	position: 	absolute;
	left: 		350px;
	top: 		0;
	*/
	margin-left: 420px;
}

[data-sectionID="featureScreens"] .mainContentBlockSectionBlockSplitX2{
	min-height: 							168px;
}
[data-sectionID="featureScreens"] .mainContentBlockSectionBlockSplitP1{
	height: 								168px;
}
[data-sectionID="featureDevices"] .mainContentBlockSectionBlockSplitX2{
	min-height: 							121.68px;
}
[data-sectionID="featureDevices"] .mainContentBlockSectionBlockSplitP1{
	height: 								121.68px;
}

.mainContentBlockSectionBlockImage{
	
}
.mainContentBlockSectionBlockImage[data-imageRef="screens1"]{
	background-image: 						url('../img/png/trialexpire-screens1.png');
	background-repeat: 						no-repeat;
	background-size: 						contain;
	background-position: 					center center;
	width: 									350px; /*550px;*/
	height: 								168px; /*264px;*/
}
.mainContentBlockSectionBlockImage[data-imageRef="devices1"]{
	background-image: 						url('../img/png/trialexpire-devices1.png');
	background-repeat: 						no-repeat;
	background-size: 						contain;
	background-position: 					center center;
	width: 									350px; /*558px;*/
	height: 								121.68px; /*194px;*/
}

.mainContentBlockSectionBlockHeader{
	font-weight: 		bold;
	font-size: 			1.5em;
	text-align: 		left;
	padding-bottom: 	0.3em;
}
.mainContentBlockSectionBlockText{
	text-align: 		left;
	position: 			relative;
}
.mainContentBlockSectionBlockTextStrong{
	font-weight: bold;
}

.subscribeButtonContainer{
	display: inline-block;
	vertical-align: top;
	margin-left: 2em;
}
.subscribeButtonContainer:first-child{
	margin-left: 0;
}
.subscribeButton{
	color: white;
	border-radius: 0.3em;
	padding: 0.8em;
	cursor: pointer;
	
	-webkit-touch-callout: 					none;
	-webkit-user-select: 						none;
	-khtml-user-select: 						none;
	-moz-user-select: 							none;
	-ms-user-select: 							none;
	user-select: 									none;
}
.subscribeButton:hover{
	transition: background-color 300ms linear;
	background: #000000;
}

.subscribeButtonAnnual{
	background: #6fa3aa;
}
.subscribeButtonMonthly{
	background: #9190ab;
}
.subscribeButtonPost{
	padding-top: 	0.6em;
	font-size: 		0.8em;
}

@media only screen and (max-width : 1500px) {
	[data-contentBlock="topBlock"] .mainContentBlock{
		max-width: 600px;
	}
}
@media only screen and (max-width : 1250px) {
	[data-contentBlock="topBlock"] .mainContentBlock{
		max-width: 400px;
	}
}
@media only screen and (max-width : 1020px) {
	[data-contentBlock="featureBlock"] .mainContentBlock{
		max-width: 50%;
	}
	.mainContentBlockSectionBlockSplitP1{
		position: 	static;
		text-align: 		center;
		margin-left: 		auto;
		margin-right: 		auto;
	}
	.mainContentBlockSectionBlockSplitP2{
		margin-left: 0;
	}
	[data-sectionID="featureScreens"] .mainContentBlockSectionBlockSplitP2{
		
	}
	[data-sectionID="featureDevices"] .mainContentBlockSectionBlockSplitP2{
		
	}
}
@media only screen and (min-width : 1021px) {
	
}

.noTopPadding,
.mainContent.noTopPadding{
	padding-top: 0;
}

.formResponse{
	padding: 		20px;
	border-radius: 	6px;
	color: 			white; 
	text-align: 	center;
	/*display: 		inline-block;*/
	margin-bottom: 	20px;	
	display: 		none;
}

.formResponse[data-responseStatus="Invalid"]{
	background: 	#c38016;
	display: 		inline-block;
}
.formResponse[data-responseStatus="Success"]{
	background: 	#479d1d;
	display: 		inline-block;
}

/* ! --------------------------------------------------------------------------------- */


.gridOverlay{
  position: absolute;
  top: 0;
  left: 0;
}
.stackOverlay{
  position: absolute;
  top: 0;
  right: 0;
}
.gridBlock{
  position: absolute;
  /*cursor: pointer;*/
}
.gridBlock:hover{
  /*background: red;*/
}
.stackBlock{
  position: absolute;
  left: 0;
  cursor: pointer;
  border-bottom: 1px solid white;
}
.stackBlock:hover{
  background: rgba(0, 0, 0, 0.5);
  animation: stackBlockHover 1.5s infinite;
}
@keyframes stackBlockHover {
	from, to 		{ background: rgba(0, 0, 0, 0) }
	50% 			{ background: rgba(0, 0, 0, 0.7) }
	100% 			{ background: rgba(0, 0, 0, 0) }
}
.main{
  position: relative;
  /*width: 600px;
  height: 480px;*/
  padding: 2em;
}
#puzzle{
	position: absolute;
	top: 0;
	left: 0;
}
#buttons{
	position: absolute;
	top: 0;
	right: 0;
}
.seshtestbut1{
	display: inline-block;
	margin-top: 1em;
	padding: 0.4em;
	background: #e07a7a;
	color: white;
	border-radius: 0.3em;
	cursor: pointer;
}
.formbut{
	display: inline-block;
	margin-top: 1em;
	padding: 0.4em;
	background: #e07a7a;
	color: white;
	border-radius: 0.3em;
	cursor: pointer;
}
.formbut.multiButton{
	margin-left: 1em;
}
.formbut.multiButton:first-child{
	margin-left: 0;
}
.formbut.buttonDisabled{
	opacity: 0.2;
	cursor: default;
}
.emailAddy1Input{
	box-shadow: inset 0px 0px 1px 1px rgba(72, 72, 72, 0.75);
	width: 18em;
	padding: 0.4em;
	border-radius: 0.2em;
	margin-left: 1.4em;
	margin-top: 1em;
}
#littlecanvas1{
	position: absolute;
	top: 480px;
	left: 0;
}
.targetTile{
	border: 2px solid #ff0202;
	/*box-shadow:  inset 0 0 20px 0 green;*/
	animation:	 targetTileHilite 2.5s infinite;
	box-shadow: 0px 0px 8px 8px rgba(255, 255, 255, 0.5);
}
.targetTile.interrogated{
	border: 2px solid rgba(255, 255, 255, 0.4);
	animation: targetTileHiliteInterrogated 1.5s infinite;
	box-shadow: none;
}
.interrogatorSparkButton{
	display: inline-block;
	margin-top: 1em;
	padding: 0.4em;
	background: #e07a7a;
	color: white;
	border-radius: 0.3em;
	cursor: pointer;
}
.formbut:not(.buttonDisabled):hover,
.interrogatorSparkButton:hover{
	background: #3e1313;
}
@keyframes targetTileHilite {
	from, to 		{ border: 6px solid green }
	25% 			{ border: 6px solid yellow }
	50% 			{ border: 6px solid blue }
	75% 			{ border: 6px solid red }
	/*from, to 	{ box-shadow: 0 0 20px 0  green , 0 0 0 2px white , inset 0 0 2px 0  black }
	25% 			{ box-shadow: 0 0 25px 0  aqua , 0 0 0 2px white , inset 0 0 2px 0  black }
	50% 			{ box-shadow: 0 0 25px 0  yellow , 0 0 0 2px white , inset 0 0 2px 0  black }
	75% 			{ box-shadow: 0 0 20px 0  orange , 0 0 0 2px white , inset 0 0 2px 0  black }*/
	/*
	from, to 		{ box-shadow:  inset 0 0 20px 0  green ,  inset 0 0 0 2px white , inset 0 0 2px 0  black }
	25% 			{ box-shadow:  inset 0 0 25px 0  aqua ,  inset 0 0 0 2px white , inset 0 0 2px 0  black }
	50% 			{ box-shadow:  inset 0 0 25px 0  yellow ,  inset 0 0 0 2px white , inset 0 0 2px 0  black }
	75% 			{ box-shadow:  inset 0 0 20px 0  orange ,  inset 0 0 0 2px white , inset 0 0 2px 0  black }
	*/
}
@keyframes targetTileHiliteInterrogated {
	from, to 		{ border: 2px solid rgba(255, 255, 255, 0) }
	50% 			{ border: 2px solid rgba(255, 255, 255, 0.6) }
	100% 			{ border: 2px solid rgba(255, 255, 255, 0) }
}

/* --------- */
				
#loginFormContent,
#helpDeskFormContent,
#passRecoverFormContent{
	/*
	padding: 					0.5em 2em 2em 2em;
	background: 				#54524d;
	*/
}

#loginFormContent input,
#helpDeskFormContent input,
#passRecoverFormContent input{
    -webkit-appearance:		none;
    -moz-appearance:			none;
    appearance:					none;
    border: 							none;
    width: 							100%;
    font-size: 						1.1em; 
}

#loginFormHeader,
#helpDeskFormHeader,
#passRecoverFormHeader{
	font-size: 							1.2em;
	text-align: 							center;
	color: 								rgba(255,255,255,0.5);
	font-family: 						'Asap', "Lucida Grande", sans-serif;
	margin-bottom: 					1em;
}

.helpDeskFormFieldInput{
	
}

.helpDeskFormField_TextArea{
	-webkit-appearance:		none;
    -moz-appearance:			none;
    appearance:					none;
    border: 							none;
    width: 							100%;
    resize: 							none;
    min-height: 					12em;
    font-family: 					'Asap', "Lucida Grande", sans-serif;
	font-size: 						1.1em; 
	line-height: 					1.3em
}

.helpDeskFormFieldContainer{
	
}

#helpDeskFormField_Message{
	
}

.loginFieldContainer,
.helpDeskFormFieldContainer,
.passRecoverFormFieldContainer{
	background: 				white;
	padding: 					1em;
	color: 						#74756d;
	/*box-shadow: 				0 0 0 2px #c4c4c4;*/
	box-shadow:					0px -10px 0px -9px rgba(0, 0, 0, 0.1);
	position: 					relative;
}

.loginFieldContainer:first-child,
.helpDeskFormFieldContainer:first-child,
.passRecoverFormFieldContainer:first-child{
	border-radius: 				0.2em 0.2em 0 0;
	box-shadow:					none;
	/*box-shadow:					0px 8px 0px -7px rgba(0, 0, 0, 0.2);*/
	/*border-bottom: 				1px solid rgba(0, 0, 0, 0.2);*/
}

.loginFieldContainer:last-child,
.helpDeskFormFieldContainer:last-child,
.passRecoverFormFieldContainer:last-child{
	border-radius: 				0 0 0.2em 0.2em;
	/*box-shadow:					0px -10px 0px -9px rgba(0, 0, 0, 0.1);*/
}

.loginFieldIcon,
.helpDeskFormFieldIcon,
.passRecoverFormFieldIcon{
	/*display: 						inline-block;*/
	position: 					absolute;
	left: 							0.4em;
	top: 							0.4em;
	padding: 					0.2em 0.2em 0 0;
	font-size: 					1.5em;
}

.loginFieldInput,
.helpDeskFormFieldInput,
.passRecoverFormFieldInput{
	/*display: 						inline-block;*/
	/*margin-left: 				1.7em;*/
	/*position:					relative;
	top: 							-0.4em;*/
	color: 						#74756d;
}

.loginFormField_Input,
.helpDeskFormField_Input,
.passRecoverFormField_Input,
.helpDeskFormField_TextArea{
	color: 						#74756d;
}

.loginFormField_Input:disabled,
.helpDeskFormField_Input:disabled,
.passRecoverFormField_Input:disabled,
.helpDeskFormField_TextArea:disabled {
    background: 				transparent;
    /*font-style: 				italic;*/
    /*color: 						#45c4e5;*/
}

/*input:-webkit-autofill {*/
.loginFormField_Input:-webkit-autofill,
.helpDeskFormField_Input:-webkit-autofill,
.passRecoverFormField_Input:-webkit-autofill,
.helpDeskFormField_TextArea:-webkit-autofill{
    -webkit-box-shadow: 	0 0 0 1000px white inset;
}

.formFieldsPostSend{
	display: 				none;
	text-align: 			left;
	margin-top: 			30px;
}
.formFieldsPostSend[data-sendStatus="Sent"]{
	display: 				block;
}

.formFieldsPostSendBlock{
	margin-bottom: 			20px;
}
.formFieldsPostSendEmailTitle,
.formFieldsPostSendMsgTitle{
	
}
.formFieldsPostSendEmail,
.formFieldsPostSendMsg{
	padding: 				10px;
	background: 			rgba(255, 255, 255, 0.65);
	border-radius: 			6px;
	margin-top: 			10px;
}

.helpDeskFormField_Submit{
	/*display: 						none;*/
	padding: 		10px 20px 10px 20px;
	border-radius: 	6px;
	background: 	#8074cc;
	color: 			white; 
	text-align: 	center;
	display: 		inline-block;
	margin-top: 	20px;	
	cursor: 		pointer;
}

#loginFormFeedback{
	color:						white;
	padding: 					0.7em;
	text-align: 					middle;
	display: 						none;
	box-shadow: 				inset 0 10px 11px -9px rgba(50, 50, 50, 0.75), inset 0 -3px 0 -2px white;
	border-bottom: 			1px solid rgba(229, 228, 228, 1);
}

#loginFullContainer.loginError #loginFormFeedback,
#loginFullContainer.passRecoverError #loginFormFeedback{
	background: 				#d03d3d;
}
#loginFullContainer.passRecoverSuccess #loginFormFeedback{
	background: 				#4c7c3c;
}

.loginFeedbackIcon{
	padding-right: 			0.4em;
	padding-left: 				0.6em;
	font-size: 					1.7em;
	position: 					absolute;
	top: 							0;
	left: 							0;
}

.loginFeedbackText{
	/*position:					relative;
	top: 							-0.4em;*/
	font-family: 				'Asap', "Lucida Grande", sans-serif;
	margin-left: 				3.5em;
	line-height: 				1.3em;
}

#loginFormFeedbackContent{
	position: 					relative;
}