#signInForm label { word-wrap: normal; }
#signInPage .pageWidthSmall { max-width:768px; width:100%; }
#signInPage header { margin:60px auto 0; }
#signInPage .mainGrid { margin-top: 20px; }
#signInPage .signInOuterCon { padding:40px 20px; }
#signInPage #signInCon .alert { margin-bottom: 20px; }
#signInPage header nav .signInLogo { display:block; margin:0 auto; min-height:32.75px; width:183px; }
#signInPage main.page { margin:0 auto 80px; }
#signInPage .rightBorder { border-right:solid 2px #dedede; }
#signInPage .signInHelp { min-width:270px; padding:40px 20px 40px 20px; }
#signInPage #signInFrameWrp { overflow:hidden; }
#signInPage #signInFrame { border:none; height:231px; margin:0; min-width:100%; padding:0; width:1px; }
#signInSubTitle { margin-top:20px; }
#signInPage #coolBigIcon #iconSvg { width:111px; height:130px; }
#signInPage #coolBigIcon #iconBackground { fill:#0079A3 }
#signInPage #lockIcon,
#signInPage #keyIcon,
#signInPage #shieldIcon,
#signInPage #multiUserIcon,
#signInPage #clockIcon { display:none; }
#signInPage .ancGridEqual .ancCol.verticalMiddle { vertical-align:middle; }
#signInPage #coolBigIcon.lock #lockIcon { display:inherit; }
#signInPage #coolBigIcon.key #keyIcon { display:inherit; transform-origin:43px 38px; }
#signInPage #coolBigIcon.key.green #keyIcon { transform:rotate(-90deg); transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.3); }
#signInPage #coolBigIcon.shield #shieldIcon { display:inherit; }
#signInPage #coolBigIcon.clock #clockIcon { display:inherit; }
#signInPage #coolBigIcon.multiUser #multiUserIcon { display:inherit; }
#signInPage #coolBigIcon.blue #iconBackground,
#signInPage #coolBigIcon.blue #iconBackgroundTransition { fill:#0079a3; }
#signInPage #coolBigIcon.green #iconBackground,
#signInPage #coolBigIcon.green #iconBackgroundTransition { fill:#6ba410; }
#signInPage #coolBigIcon.red #iconBackground,
#signInPage #coolBigIcon.red #iconBackgroundTransition { fill:#c14139; }
#signInPage #coolBigIcon.orange #iconBackground,
#signInPage #coolBigIcon.orange #iconBackgroundTransition { fill:#e3720f; }
#signInPage #coolBigIcon #iconBackgroundTransition { fill:#0079a3; transform:scale(0); transform-origin:center; }
#signInPage #coolBigIcon.changeColor #iconBackgroundTransition { transform:scale(1); transition:transform .2s; }
#signInPage #coolBigIcon #iconBackgroundTransition.blue { fill:#0079a3; }
#signInPage #coolBigIcon #iconBackgroundTransition.red { fill:#c14139; }
#signInPage #coolBigIcon #iconBackgroundTransition.orange { fill:#e3720f; }
#signInPage #coolBigIcon #iconBackgroundTransition.green { fill:#6ba410; }
#signInPage #coolBigIcon.unlocked #lockShackle { transform:translateY(-7px); transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.475); }
#signInPage #coolBigIcon.unlocked #lockBody { transform:translateY(5px); transition:transform .3s; }
#signInPage .paddingLeftLarge { padding-left:15px; }
#signInPage .paddingRightLarge { padding-right:20px; }
#signInPage .leftSpacingMed { margin-left:15px; }
#coolBigIcon .iconContainer { transform-origin:center bottom; }
#coolBigIcon.zoomedOut { transform:scale(0); }
#coolBigIcon.zoomedOut.zoomIn { animation:zoomIn .5s; transform:scale(1); transform-origin:bottom; }
#coolBigIcon.zoomOut { animation:zoomOut .2s ease-out; transform:scale(0); transform-origin:bottom; }
#coolBigIcon.shake .iconContainer { animation:shake 1s; }
#coolBigIcon.nod .iconContainer { animation:nod 1s; }
#coolBigIcon.tap .iconContainer { animation:tapDance 1s; }
#coolBigIcon #clockIcon { transform:translateY(-3px); }
#coolBigIcon #clockIcon #minuteHand,
#coolBigIcon #clockIcon .minuteRotator { transform-origin:55.25px 57.75px; }
#coolBigIcon.animateTime #clockIcon .minuteRotator { animation:rotateMinute 15s; }
#coolBigIcon.animateTime #clockIcon .hourRotator { animation:rotateHours 15s ease-in-out; }
#coolBigIcon #clockIcon #hourHand,
#coolBigIcon #clockIcon .hourRotator { transform-origin:55px 58px; }
#coolBigIcon {position: relative; display:inline-block;};
#coolBigIcon #iconShadow { transform-origin: center }
#coolBigIcon .iconWithBackground {transform-origin: 55px 55px}

@keyframes rotateMinute {
	0% {transform: rotate(-180deg); }
	100% { transform: rotate(0); }
}
@keyframes rotateHours {
	0% {transform: rotate(-15deg); }
	100% { transform: rotate(0); }
}
@keyframes shake {
	10% {transform: translateX(-3px); }
	20%, 80% { transform: translateX(3px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(3px); }
	90% {transform: translateX(-1px); }
}
@keyframes zoomIn {
	0% {transform: scale(0); }
	50% {transform: scale(1.1); }
	80% { transform: scale(.94); }
}
@keyframes zoomOut {
	0% {transform: scale(.94); }
	30% {transform: scale(1.1); }
	100% { transform: scale(0); }
}
@keyframes nod {
	10% {transform: translateY(-3px); }
	20%, 80% { transform: translateY(3px); }
	30%, 50%, 70% { transform: translateY(-4px); }
	40%, 60% { transform: translateY(3px); }
	90% {transform: translateY(-1px); }
}
@keyframes tapDance {
	0%, 100% { transform: translateY(0) }
	25%, 50%,75% { transform: translateY(-4px) }
	12.5%, 62.5%{ transform: translate(-15px, 0px) rotate(20deg); }
	37.5%, 87.5% { transform: translate(15px, 0px) rotate(-20deg); }
}
@media only screen and (max-width : 767px) {
	#signInPage header { margin:15px auto 0; }
	#signInPage .mainGrid { margin-top:5px; }
	#signInPage .signInOuterCon { padding:0 15px 20px; }
	#signInPage .rightBorder { border-right:none; border-bottom:solid 1px #dedede; }
	#signInPage .signInHelp {display:grid; grid-template-columns: 75px auto; grid-template-rows:auto auto 15px; padding:0; row-gap:0;}
	#signInTitle { margin-top:12px;}
	#coolBigIcon { width:75px; height:90px; order:-1; grid-row: span 3; }
	#coolBigIcon #iconSvg { transform: scale(.67); transform-origin:top left; }
	#signInTitle { text-align:left; padding-left:15px; margin-bottom:0;}
	#signInSubTitle { text-align:left; margin-top:0; padding-left:15px; min-height: 55px }
	#signInPage .paddingLeftLarge { padding-left:0; margin-left:-15px; }
	#signInPage .paddingRightLarge { padding-right:0; }
	#signInPage #signInFrameWrp { margin-right: -15px; }
}