/*/////// FONTS ///////*/
/*/////// HOME PAGES ///////*/
/*//// BUTTONS ////*/
/*//// TOP NAVIGATION ////*/
/*/// PROCESS ///*/
/*/// STATISTICS ///*/
/*/// SUB-NAVIGATION ///*/
/*//// SECTIONS ////*/
/*//// OFFER & PRIVACY SECTIONS ////*/
/*//// PRICING ////*/
/*//// FOOTER ////*/
/*///// TRACKER /////*/
/*//// MOBILE TRACKER ////*/
/*//// EMPLOYER POLYGON ///*/
/*/// EMPLOYER READY ///*/
/*//// QUOTES ////*/
/*//// MOBILE ////*/
/*/// MOBILE OVERLAY ///*/
/*//// CON'T MOBILE ////*/
/*//// SIGN-IN / SIGN-UP ///*/
/*//// MOBILE SIGN-IN / SIGN-UP ///*/
/*/// SIGN-IN / SIGN-UP ERROR MESSAGES ///*/
/*/// SUB-NAVIGATION ANIMATION ///*/
/*///// BLOG //////*/ 
/*/// ERROR ///*/
/*/// MOVING LOADER ///*/
/*/// REPORT SAMPLE ///*/
/*/// CONTINUE TO ARTICLE ///*/

html {
     scroll-behavior: smooth; 
 }



/*/////// FONTS ///////*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
cite,
code,
del,
dfn,
em,
img,
p,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	position: relative
}

a:visited,
a {
	text-decoration: none
}

strong {
	font-weight: 500
}

body {
	background-color: #fff;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	line-height: 18px;
	color: #212529;
	margin: 0
}

h1,
h2,
h3,
h4,
h5,
button {
	font-family: Roboto, Arial;
	color: #25282B;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	position: relative
}

h1 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 32px;
	line-height: 38px
}

#hp-control h1, h2 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 32px;
	line-height: 38px;
	font-weight: normal
}


h3 {
	font-weight: 500;
	font-size: 22px;
	line-height: 26px;
	margin-top: 0px
}

h4 {
	font-weight: normal;
	font-size: 16px;
	line-height: 40px
}

h5 {
	font-weight: 500;
	font-size: 14px;
	line-height: 18px
}

/*/////// HOME PAGES ///////*/

.hidden {
	display: none !important
}

#hp-backgrd-js,
#hp-backgrd-em,
#hp-backgrd-st {
	width: 100vw;
	margin-top: 44px;
	position: absolute;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	height: calc( 85% - 44px);
}




.hp-Signin-header #hp-backgrd-Signin-em {
	transform: translateY(-20%);
	height: 600px
}

#hp-backgrd-Signin-js,
#hp-backgrd-Signin-em,
#hp-backgrd-Signin-st {
	margin-top: 0px;
	width: 100vw;
	position: absolute;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	height: 100%	
}

#hp-control.hp-nav1 #hp-backgrd-Signin-js,
#hp-control.hp-nav2 #hp-backgrd-Signin-em,
#hp-control.hp-nav3 #hp-backgrd-Signin-st,
#hp-control.hp-nav1 #hp-backgrd-js,
#hp-control.hp-nav2 #hp-backgrd-em,
#hp-control.hp-nav3 #hp-backgrd-st  {
	display: block;
	opacity: 1
}



#hp-backgrd-cover-js,
#hp-backgrd-cover-st,
#hp-backgrd-cover-js-mobile,
#hp-backgrd-cover-st-mobile{
    opacity: 1;
	width:100%;
	height:100%;
	z-index: 4;
	position: absolute;
	top: 0;
    background-size: cover;
	transition: all 1s ease-in-out;
}



#hp-backgrd-cover-js,
#hp-backgrd-cover-js-mobile{	
	background-image: linear-gradient(90deg, #0222b3, #0247ff);}


#hp-backgrd-cover-st,
#hp-backgrd-cover-st-mobile{	
	background-image: linear-gradient(90deg, #000d22, #010e34);}


#hp-backup-st, #hp-backup-st-mobile {
    position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	opacity: 0
} 

#hp-backup-offer, #hp-backup-offer-mobile{
    position: absolute;
	top: 0;
	right: 0;
	opacity: 0	
}

#hp-backup-offer-mobile{
	top: 140px;
}

#hp-backup-privacy, #hp-backup-privacy-mobile {
    position: absolute;
	margin-top: -10px;
	left: 0;
	opacity: 0;
	height: 110%
} 


#css-animation-main-js,
#css-animation-main-js-mobile {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
    opacity: 0;
	background-image: linear-gradient(90deg, #000a23, #0222b3);
	z-index: 5
}

.hp-em-layer {width: 100%; height: 100%; top: 0; left: 0; position: absolute}

#hp-backgrd-Signin-em .hp-em-layer.layerBack {transform: none}
#hp-backgrd-Signin-em .hp-em-layer {transform: scale(2) translateX(-20%)}

/* NEW EMPLOYER ANIMATION */
.layerBack {background-image: linear-gradient(60deg, #000522, #000e56)} 

.emLayer-L2 {
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to left, #00ffc2, #6fffbd);
	animation: em-animation-L2 15s infinite; 
	animation-timing-function: linear;

}

@keyframes em-animation-L2 {
    0% {clip-path: polygon(93% 0%, 98% 0%, 84% 100%, 56% 100%); filter: brightness(1.3)}
	60% {clip-path: polygon(85% 0%, 88% 0%, 80% 100%, 40% 100%); filter: brightness(1)}	
    100% {clip-path: polygon(93% 0%, 98% 0%, 84% 100%, 56% 100%); filter: brightness(1.3)}
}	


.emLayer-L2Re {
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to left, #5ffff5, #24e2b5);	
	animation: em-animation-L2Re 15s infinite; 
	animation-timing-function: linear;
}

@keyframes em-animation-L2Re {
    0% {clip-path: polygon(0% 88%, 0% 68%, 84% 100%, 56% 100%)}
	60% {clip-path: polygon(0% 95%, 0% 80%, 80% 100%, 40% 100%)}	
    100% {clip-path: polygon(0% 88%, 0% 68%, 84% 100%, 56% 100%)}
}	

.emLayer-L3{
	width: 100%;
	height: 100%;
	opacity: 37%;
	background-image: linear-gradient(to left, #3066ff, #007eff);
	animation: em-animation-L3 15s infinite; 
	animation-timing-function: linear;
}


@keyframes em-animation-L3 {
    0% {clip-path: polygon(94% 0%, 100% 0%, 68% 100%, 40% 100%)}
	50% {clip-path: polygon(87% 0%, 90% 0%, 84% 100%, 25% 100%)}
	80% {clip-path: polygon(87% 0%, 95% 0%, 74% 100%, 35% 100%)}		
    100% {clip-path: polygon(94% 0%, 100% 0%, 68% 100%, 40% 100%);}
}	

.emLayer-L1{
	width: 100%;
	height: 100%;
	opacity: 37%;
	background-image: linear-gradient(to left, #305dff, #2e95ff);
	animation: em-animation-L1 15s infinite; 
	animation-timing-function: linear;
}


@keyframes em-animation-L1 {
    0% {clip-path: polygon(87% 0%, 92% 0%, 70% 100%, 28% 100%)}
	40% {clip-path: polygon(97% 0%, 102% 0%, 84% 100%, 32% 100%)}
	70% {clip-path: polygon(97% 0%, 102% 0%, 78% 100%, 45% 100%)}		
    100% {clip-path: polygon(87% 0%, 92% 0%, 70% 100%, 28% 100%);}
}	

.emLayer-L1Re  {
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to left, #3d30ff, #0014ff);
	animation: em-animation-L1Re 15s infinite; 
	animation-timing-function: linear;
	opacity: 0.6;	
}

@keyframes em-animation-L1Re {
    0% {clip-path: polygon(0% 105%, 0% 78%, 70% 100%, 28% 100%)}
	40% {clip-path: polygon(0% 87%, 0% 68%, 84% 100%, 32% 100%)}		
	70% {clip-path: polygon(0% 94%, 0% 74%, 78% 100%, 45% 100%)}	
    100% {clip-path: polygon(0% 105%, 0% 78%, 70% 100%, 28% 100%)}
}	

.emLayer-L6Re{
	width: 100%;
	height: 100%;
	opacity: 37%;
	background-image: linear-gradient(to left, #305dff, #2e95ff);
    animation: em-animation-L6Re 15s infinite;
    animation-timing-function: linear;
    opacity: 0.5;	
}


@keyframes em-animation-L6Re {
    0% {clip-path: polygon(0% 92%, 0% 74%, 80% 100%, 56% 100%)}
	30% {clip-path: polygon(0% 100%, 0% 84%, 74% 100%, 38% 100%)}
	80% {clip-path: polygon(0% 96%, 0% 78%, 78% 100%, 48% 100%)}		
    100% {clip-path: polygon(0% 92%, 0% 74%, 80% 100%, 56% 100%);}
}	


.emLayer-L6{
	width: 100%;
	height: 100%;
	opacity: 37%;
	background-image: linear-gradient(to left, #3d30ff, #0014ff);
	animation: em-animation-L6 15s infinite; 
	animation-timing-function: linear;
}


@keyframes em-animation-L6 {
    0% {clip-path: polygon(88% 0%, 94% 0%, 80% 100%, 56% 100%)}
	30% {clip-path: polygon(92% 0%, 96% 0%, 74% 100%, 38% 100%)}
	80% {clip-path: polygon(92% 0%, 96% 0%, 78% 100%, 48% 100%)}		
    100% {clip-path: polygon(88% 0%, 94% 0%, 80% 100%, 56% 100%);}
}	

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

@media (max-width: 739px){
	.hp-em-layer.layerW3, .hp-em-layer.layerL2 {display: none}
}

@media ( min-width: 740px) {
	#hp-backgrd-cover-js-mobile, #hp-backgrd-cover-st-mobile, #css-animation-main-js-mobile, #hp-backup-st-mobile, #hp-backup-offer-mobile, #hp-backup-privacy-mobile {display: none}
}

@media ( max-width: 739px) {
	#hp-backgrd-cover-js, #hp-backgrd-cover-st, #css-animation-main-js, #hp-backup-st, #hp-backup-offer, #hp-backup-privacy {display: none}	
	
	#hp-backgrd-cover-js-mobile, #hp-backgrd-cover-st-mobile, #css-animation-main-js-mobile, #hp-backup-st-mobile, #hp-backup-offer-mobile, #hp-backup-privacy-mobile {opacity: 100%}
	
	#hp-backgrd-Signin-st #hp-backup-st-mobile {transform: translateY(-63%)}
}
	
	
/*//// BUTTONS ////*/

.btn-icon-sendTo {
	fill: none;
    stroke: #516675;
    stroke-width: 3px;
    width: 13px;
    height: 13px;
    margin-right: 5px;
}

.hp-btn-white:hover .btn-icon-sendTo {stroke: #1058aa;}
.hp-btn-white:active .btn-icon-sendTo {stroke: #1058aa;}

/*//// TOP NAVIGATION ////*/


#hp-TopNavigation-Wrapper {
	top: 0px;
	width: 100%;
	height: 55px;
	position: fixed;
	z-index: 600;
	padding-top: 20px;
	background-color: white;
	transition: 1s ease-in-out
}

@media ( min-width: 740px) {
	
#hp-TopNavigation-Wrapper.smallHeader {height: 42px}

#hp-TopNavigation-Wrapper.smallHeader .hp-TopNavigation-Tabs {font-size: 15px}
#hp-TopNavigation-Wrapper.smallHeader .hp-TopNavigation-btn {font-size: 15px}

#hp-TopNavigation-Wrapper.smallHeader .hp-TopNavigation-btn.hp-btn { padding: 12px 22px 10px 22px}
#hp-TopNavigation-Wrapper.smallHeader #hp-logo img {height: 42px}
#hp-TopNavigation-Wrapper.smallHeader #jobseekers-tab::after {top: 0px}

#hp-sub-nav-js.smallSubNav,
#hp-sub-nav-em.smallSubNav,
#hp-sub-nav-st.smallSubNav {height: 64px}

#hp-sub-nav-js.smallSubNav .hp-jobseeker-sub-nav-label,
#hp-sub-nav-em.smallSubNav .hp-em-sub-nav-label,
#hp-sub-nav-st.smallSubNav .hp-st-sub-nav-label {font-size: 15px}

#hp-sub-nav-js.smallSubNav #hp-jobseeker-sub-nav1::after,
#hp-sub-nav-em.smallSubNav #hp-em-sub-nav1::after,
#hp-sub-nav-st.smallSubNav #hp-st-sub-nav1::after {top: 2px}

}


#BlogPage #hp-TopNavigation-Wrapper,
#BlogPage #hp-logo img {
	transition: none
}

#hp-FixHeader-Wrapper {
	top: 0px;
	width: 100%;
	height: 74px;
	position: fixed;
	z-index: 20;
	padding-top: 20px;
	background-color: white
}

.hp-TopNavigation-WhiteBckg{
	background: white;
	height: 78px;
	width: 100%;
	position:absolute;
	top: 0
}

.hp-TopNavigation-WhiteBckg.noTabSelector {
	height: 94px;
	border-bottom: 1px solid #516775
}

.hp-TopNavigation {
	width: 86%;
	display: flex;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	justify-content: space-between
}


#hp-logo {
	width: 160px;
	z-index: 460	
}

#hp-logo img,
.hp-logo2 img {
	height: 50px;
	transform: translate(0px, -3px);
	transition: 1s ease-in-out
}


.hp-TopNavigation-Tabs {
	width: 140px;
    position: relative;
    font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
	margin-top: 20px;
	color:#212529;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: all 1s ease-in-out, color 0s;
	height: 30px;
  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;	
}

.hp-TopNavigation-Tabs.arrow-down{	
	width: 100px;
	position: relative;
}

	
.svg-arrow-down {
	fill:none;
	stroke:#212529;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
	position: absolute;
	width: 16px;
	height: 9px;
	top: 5px;
    margin-left: 4px;	
	cursor: default;
	z-index: -1
}

.blog-page .svg-arrow-down {z-index: 0}

@media ( max-width: 1050px) {
	.hp-TopNavigation-Tabs.arrow-down {display: none}
}



.hp-TopNavigation-Tabs:hover .svg-arrow-down {
	stroke: #1058aa
}

#jobseekers-tab span {
	z-index: 450; 
	display: block; 
	position: relative
}

#jobseekers-tab::after{	
	display: inline-block;
	content: "";
	background: url('/resources/images/professional/dashboard/TabSelector.svg') no-repeat;
    position: relative;
	left: -2930px;
	width: 6000px;
	height: 25px;
	top: 12px;
}

#jobseekers-tab.noTabSelector::after {
	display: none
}

#jobseekers-tab.animated::after{
	transition: 0.8s ease-in-out;	
}	

.hp-nav2 #jobseekers-tab::after{	
	left: -2790px;
	transition: 0.8s ease-in-out;	
}

.hp-nav3 #jobseekers-tab::after{	
	left: -2650px;
	transition: 0.8s ease-in-out;	
}

.hp-TopNavigation-Tabs:hover {
	text-decoration: none;
	color:#1058aa;
}

.hp-TopNavigation-Tabs-Wrapper-In{
	display: flex;
	justify-content: flex-end
}


.hp-TopNavigation-buttons{
	position: relative;
	width: 300px;
	z-index: 20
}

.hp-btn {
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 15px;
	padding-bottom: 13px;
	border-width: 1px;
	border-style: solid;
	border-radius: 100px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	cursor: pointer;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
	display: inline-block;
  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;	
}

.hp-TopNavigation-btn {
	font-size: 17px;
	line-height: 21px;
	margin-left: 10px;
	font-weight: 500;
	float: right;
	transition: all 1s ease-in-out, border 0s, background 0s, color 0s, box-shadow 0s;
}

.hp-btn-blue {
	border-color: #2196F3;
	background-color: #2196F3;
	color: #fff
}

.hp-btn-blue:hover {
	border-color: #1058aa;
	background-color: #1058aa;
	color: #fff
}

.hp-btn-blue:active {
	border-color: #1058aa;
	background-color: #1058aa;
	color: #fff;
	box-shadow: 0 0 0 4pt #C0D3F0
}

.hp-btn-white {
	border-color: #516675;
	background-color: #fff;
	color: #516675
}

.hp-btn-white:hover {
	border-color: #1058aa;
	background-color: #F8FAFE;
	color: #1058aa
}

.hp-btn-white:active {
	border-color: #1058aa;
	background-color: #F8FAFE;
	color: #1058aa;
	box-shadow: 0 0 0 4pt #C0D3F0
}

.hp-btn.hp-btn-deactivated {
	border-color: #d8dee3;
	background-color: #d8dee3;
	color: #fff;
	cursor: default;
}

.hp-btn.hp-btn-deactivated:hover {
	border-color: #d8dee3;
	background-color: #d8dee3;
	color: #fff
}

.hp-btn.hp-btn-deactivated:active {
	border-color: #d8dee3;
	background-color: #d8dee3;
	color: #fff;
	box-shadow: none
}

.header-mobile-icon span {
	color:#212529;
	font-size:28px;
	text-decoration:none;
	cursor:pointer 	
}

.header-mobile-icon span:hover {
	color: #1058aa
}

.hp-dropdown {
	list-style: none;
    box-sizing: border-box;
    margin: 0;
    text-align: left;
    position: absolute;
    top: 70px;
    z-index: 1000;
    min-width: 180px;
    padding: 8px 0;
    border-radius: 4px;
    color: #1c252c;
    background-color: white;
    box-shadow: 0 0 0 1px rgba(77,101,117,0.1), 0 3px 10px 0 rgba(77,101,117,0.2);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    overflow: hidden;
	visibility: hidden;
	-webkit-transition: all 150ms linear;
	-o-transition: all 150ms linear;
	transition: all 150ms linear;	
	height: 0;
    width: 220px;
	left: calc(67.2vw - 106px);
}

.hp-dropdown.is-open {visibility: visible; height: 198px}

.hp-dropdown > li{
	display: block;
    line-height: 20px;
	text-align: left;
}

.hp-dropdown-link {
    display: block;
    padding: 4px 16px;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
    color: #25292c;
    background-color: transparent;
	font-family: Roboto, Arial;
	font-size: 17px;
	line-height: 28px;
}


.hp-dropdown-link:hover {
    background-color: #e9effc;
	color: #25282B;
}

.hp-dropdown-link:active {
	background: #1058aa;
	color: white}


@media (min-width: 1001px){
	.header-mobile-icon {
		display: none;
	}

#hp-TopNavigation-Tabs-Wrapper-Out{width: Calc(100% - 460px)}
.hp-TopNavigation-Tabs-left{width: Calc(70% - 364px)}
.hp-TopNavigation-Tabs-right{width: Calc(30% - 156px)}
}

@media (max-width: 1000px){
.header-mobile-icon {
		display: block;
		z-index: 440;
		margin-top: 20px;
		width: 25px
	}
	.hp-TopNavigation-buttons,
	.hp-dropdown {
		display: none
	}
}

@media (max-width: 739px){
.header-mobile-icon {
		margin-top: 15px;
		position: fixed;
		right: 7%
	}
	#hp-logo {
		position:fixed;
		left: 7%}
}


/*//// END TOP NAVIGATION ////*/

/*//// PRIMARY BACKGROUND ////*/

.hp-btn-primarybck {
	border-color: white;
	background-color: transparent;
	color: white;
	font-size: 22px;
	line-height: 28px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-align: center
}

.hp-btn-privacy:hover,
.hp-btn-primarybck:hover {
	border-color: white;
	background-color: white;
	color: #212529
}

.hp-btn-privacy:active,
.hp-btn-primarybck:active {
	border-color: white;
	background-color: white;
	color: #ff1adf;
	box-shadow: 0 0 0 2pt #ff1adf
}

.hp-btn-primarybck.greenClick:active {
	border-color: white;
	background-color: white;
	color: #00ab82;
	box-shadow: 0 0 0 2pt #00ab82
}

.hp-btn-primarybck.blueClick:active {
	border-color: white;
	background-color: white;
	color: #00A3F4;
	box-shadow: 0 0 0 2pt #00A3F4
}

#hp-landing-msg-js,
#hp-landing-msg-em,
#hp-landing-msg-st {
	display: none
}

#hp-control.hp-nav1 #hp-landing-msg-js,
#hp-control.hp-nav2 #hp-landing-msg-em,
#hp-control.hp-nav3 #hp-landing-msg-st {
	display: block
}

.hp-landing-msg {
	position: absolute;
	top: 20%;
	margin-left: 7%;
	z-index: 19;
	top: calc(42% + 55px);
	transform: translateY(-50%);
	cursor: default;
  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;		
}

.hp-landing-msg>* {
	opacity: 0;
	transform: translateY(300%);
	animation-name: moveUp;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	z-index: 20	
}


@keyframes moveUp {
	from {
		transform: translateY(300%);
		opacity: 0
	}
	to {
		transform: translateY(0%);
		opacity: 1
	}
}

.hp-landing-msg h1 {
	animation-delay: 0.5s;
	z-index: 20	
}

.hp-landing-msg h4 {
	animation-delay: 0.7s;
	z-index: 20	
}


.hp-landing-msg .hp-landing-msg-bullet {
	display: block;
	position: relative;
	margin-left: 10px
}

.hp-landing-msg-bullet::before {	
    width: 14px;
    height: 20px;
    content: "";
    display: block;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    clip-path: polygon(0 0, 100% 50%, 0% 100%);
    background-color: #00A3F4;
}



.hp-landing-msg .hp-btn,
.hp-landing-msg .hp-btn-container {
	animation-delay: 1.1s;
	z-index: 20	
}

.hp-landing-msg h1,
.hp-landing-msg h4 {
	color: white
}

#hp-control .hp-landing-msg h1,
.hp-landing-msg h1 {
	font-size: 50px;
	font-weight: 400;
	font-family: Roboto, Arial;
	margin-top: 0;
	margin-bottom: 30px;
	line-height: 60px;
	-webkit-font-smoothing: antialiased;

}

.hp-landing-msg h4 {
	font-size: 36px;
	font-family: Roboto, Arial;
	margin-bottom: 40px;
	font-weight: 400;
	line-height: 46px;
	-webkit-font-smoothing: antialiased;

}

.plus-icon {	
  	position: relative;
}

@media ( min-width: 840px) {

.plus-icon::after {	
  	width: 50px;
  	height: 50px;
  	content: "";
  	display: block;
  	position: absolute;
  	right: -28px;
  	top: -18px;
	animation: plus-animation 2s forwards ease-in-out;
}

.plus-icon.plus-icon-pink::after {	
  	background: url("/resources/images/professional/dashboard/Icon-plus.svg") no-repeat;
}

.plus-icon.plus-icon-green::after {	
  	background: url("/resources/images/professional/dashboard/Icon-plus-green.svg") no-repeat;
}

.plus-icon.plus-icon-blue::after {	
  	background: url("/resources/images/professional/dashboard/Icon-plus-blue.svg") no-repeat;
}
}

@keyframes plus-animation {
    0% { opacity: 0; }
    40% { opacity: 0; } 
    100% { opacity: 1; }
}

.Pinkbox {
	background-color: #ff1adf;
	height: 50px;
	padding: 0px 10px
}

.Greenbox {
	background-color: #23e3b5;
	height: 50px;
	padding: 0px 10px
}

.Bluebox {
	background-color: #00A3F4;
	height: 50px;
	padding: 0px 10px
}

/*/// PROCESS ///*/

.hp-step-cards {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 45px
}

.hp-step-card {
		margin-right: 30px;
		background: #F8FAFE;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 5px;
		position: relative;
		z-index: 2;
		align-items: center;
		text-align: center;
		width: 25%;
		padding: 0
	}

.hp-step-card-background-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden
	}
	
.hp-step-card-background.hp-step-card-activated {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #d1eeff;
	animation: step-card-animation 9s ease-in-out infinite;
	filter: blur(1px)
}

@media ( max-width: 739px) {

.hp-step-card-background.hp-step-card-activated {
	width: 100%;
	height: 0;
	animation: step-card-animation-mobile 9s ease-in-out infinite
}

}


.hp-step-card-background.hp-step2 {animation-delay: 1.8s}
.hp-step-card-background.hp-step3 {animation-delay: 3.6s}
.hp-step-card-background.hp-step4 {animation-delay: 5.4s}

@keyframes step-card-animation {
	0% {width: 0px}
	15% {width: 90%}
	33% {left: 100%; width: 0%}
	100% {left: 100%; width: 0%}
}

@keyframes step-card-animation-mobile {
	0% {height: 0px}
	15% {height: 90%}
	33% {top: 100%; height: 0%}
	100% {top: 100%; height: 0%}
}

	
.hp-step-card:after {
		position: absolute;
		content: "";
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
   	 	right: -25px;
    	height: 44px;
    	width: 14px;
		clip-path: polygon(0 0, 100% 50%, 0% 100%);
		background-color: #25292c
	}

.hp-step-card:last-of-type:after {
	display: none
}

.hp-step-card-title {
		text-align: center;
		font-size: 18px;		
		line-height: 26px;
    	color: #25292c;
		font-weight: bold;		
		-webkit-font-smoothing: antialiased;
		
	}	


.hp-step-card-text {
		text-align: center;
		font-size: 18px;
		line-height: 26px;
		margin-top: 0;
		margin-bottom: 30px;
		-webkit-font-smoothing: antialiased;
		text-align: center		
}	

.hp-step-card-step-last {
	text-align: center;
	position: relative;
	margin: 0
}

.stage-explanation-img {width: 40%; margin: 30px auto 20px auto}


@media ( max-width: 739px) {
	.hp-step-cards {display: block}
	.stage-explanation-img {width: 30%; margin: 20px auto 20px auto;}
	.hp-step-card:after {
    top: calc(100% + 12px);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: calc(50% - 7px);
    height: 12px;
    width: 14px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
	background-color: #16288f
	}}


@media ( max-width: 739px) {
	.hp-step-card {
	width: 100%;
	margin-right: 0;
	margin-bottom: 24px;
	padding-bottom: 20px
	}
	
	.hp-step-card-text {
	margin: auto 0
	}
	
	.hp-step-cards {
	margin-bottom: 0
	}
	
	}

/*/// STATISTICS ///*/

#hp-bottom-js,
#hp-bottom-em,
#hp-bottom-st {
	background-color: #FFF;
	position: absolute;
	top: 85%;
	width: 100%;
	z-index: 30;
	display: none
}

@media ( max-width: 739px) {
#hp-bottom-js,
#hp-bottom-em,
#hp-bottom-st {z-index: 300}		
}

#hp-control.hp-nav1 #hp-bottom-js,
#hp-control.hp-nav2 #hp-bottom-em,
#hp-control.hp-nav3 #hp-bottom-st {
	display: block
}

.hp-stats,
.hp-process {
	width:100%;
	display: inline-block !important;
	padding-bottom: 70px;
	padding-top: 70px;
}

.hp-stats.hp-noPaddingTop {
	padding-top: 0px;
}
	
.hp-section-title,
.hp-stats h2,
.hp-process h2 {
	font-size: 32px;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
	line-height: 40px;
	color: #212529;
	-webkit-font-smoothing: antialiased;
	text-align: center;
	cursor: default
}

.hp-section-title{
	font-weight: 500;
}

.hp-stats-Allcontainer,
.hp-process-Allcontainer {
	display: flex;
    justify-content: space-between;
    width: 70%;
    margin: 40px auto 0px auto;
}


@media (min-width:740px) and (max-width:1299px) {
	.hp-stats-Allcontainer, .hp-process-Allcontainer {width: 90%;}	
}

@media (min-width:1300px) and (max-width:1519px) {
	.hp-stats-Allcontainer, .hp-process-Allcontainer {width: 80%;}	
}

.hp-stats-Singlecontainer {
	width: 280px;
	cursor: default
}

.hp-stats-circle {
	width: 140px;
	height: 140px;
	margin: 0px auto 10px auto;
	position: relative
}

.hp-stats-legend {
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    line-height: 24px;
	color: #212529
}

.hp-stats-nbr,
.hp-stats-unit {
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
    text-align: center;
}

.hp-stats-nbr {color: #021E9E; font-size: 42px; top: 50px}
.hp-stats-nbr.hp-stats-green {color: #00ab82; font-size: 42px; top: 50px}
.hp-stats-nbr.hp-stats-blue {color: #00A3F4; font-size: 42px; top: 50px}
.hp-stats-unit {color: #212529; font-size: 17px; top: 82px}

.svg-circle {
	position: absolute;
	width: 140px;
	height: 140px;
	}

.pink4px {
    stroke: #FF00DD;
	stroke-width:4px;
	fill:none
}

.green4px {
	stroke: #00ab82;
	stroke-width:4px;
	fill:none
}

.blue4px {
	stroke: #00A3F4;
	stroke-width:4px;
	fill:none
}

.pinkdots {
    stroke: #FF00DD;
	stroke-width:1px;
	fill: #FF00DD;
	animation: infinitecircle 3s infinite;	
	animation-timing-function: linear;
}

@keyframes infinitecircle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(72deg); }
}

.hp-stats-spinner {
  z-index: 200;
  animation: rota 6500ms linear infinite;
  right: 0px;
}

.hp-stats-filler {
  z-index: 100;
  animation: fill 6500ms steps(1, end) infinite;
  opacity: 0;
}


.hp-stats-mask {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0px;
  z-index: 300;
  animation: mask 6500ms steps(1, end) infinite;
}


.reset-js1 {opacity: 0}
#circle-js1-2 {transform: rotate(14.4deg)}
#circle-js1-3 {transform: rotate(28.8deg)}
#circle-js1-4 {transform: rotate(43.2deg)}
#circle-js1-5 {transform: rotate(57.6deg)}
#circle-js1-6 {transform: rotate(72deg)}
#circle-js1-7 {transform: rotate(86.4deg)}
#circle-js1-8 {transform: rotate(100.8deg)}
#circle-js1-9 {transform: rotate(115.2deg)}
#circle-js1-10 {transform: rotate(129.6deg)}
#circle-js1-11 {transform: rotate(144deg)}
#circle-js1-12 {transform: rotate(158.4deg)}
#circle-js1-13 {transform: rotate(172.8deg)}
#circle-js1-14 {transform: rotate(187.2deg)}
#circle-js1-15 {transform: rotate(201.6deg)}
#circle-js1-16 {transform: rotate(216deg)}
#circle-js1-17 {transform: rotate(230.4deg)}
#circle-js1-18 {transform: rotate(244.8deg)}
#circle-js1-19 {transform: rotate(259.2deg)}
#circle-js1-20 {transform: rotate(273.6deg)}
#circle-js1-21 {transform: rotate(288deg)}
#circle-js1-22 {transform: rotate(302.4deg)}
#circle-js1-23 {transform: rotate(316.8deg)}
#circle-js1-24 {transform: rotate(331.2deg)}
#circle-js1-25 {transform: rotate(345.6deg)}
#circle-js1-26 {transform: rotate(7.2deg)}
#circle-js1-27 {transform: rotate(21.6deg)}
#circle-js1-28 {transform: rotate(36deg)}
#circle-js1-29 {transform: rotate(50.4deg)}
#circle-js1-30 {transform: rotate(64.8deg)}
#circle-js1-31 {transform: rotate(79.2deg)}
#circle-js1-32 {transform: rotate(93.6deg)}
#circle-js1-33 {transform: rotate(108deg)}
#circle-js1-34 {transform: rotate(122.4deg)}
#circle-js1-35 {transform: rotate(136.8deg)}
#circle-js1-36 {transform: rotate(151.2deg)}
#circle-js1-37 {transform: rotate(165.6deg)}
#circle-js1-38 {transform: rotate(180deg)}
#circle-js1-39 {transform: rotate(194.4deg)}
#circle-js1-40 {transform: rotate(208.8deg)}
#circle-js1-41 {transform: rotate(223.2deg)}
#circle-js1-42 {transform: rotate(237.6deg)}
#circle-js1-43 {transform: rotate(252deg)}
#circle-js1-44 {transform: rotate(266.4deg)}
#circle-js1-45 {transform: rotate(280.8deg)}
#circle-js1-46 {transform: rotate(295.2deg)}
#circle-js1-47 {transform: rotate(309.6deg)}
#circle-js1-48 {transform: rotate(324deg)}
#circle-js1-49 {transform: rotate(338.4deg)}
#circle-js1-50 {transform: rotate(352.8deg)}

/*/// SUB-NAVIGATION ///*/

#hp-sub-nav-js,
#hp-sub-nav-em,
#hp-sub-nav-st{
    width: 100%;
	height: 90px;
    position: sticky;
    top: 50px;
	overflow: hidden;
	margin-bottom: 70px;
	transition: 0.3s ease-in-out;
	z-index: 15
}

@media ( max-width: 739px) {
#hp-sub-nav-js, #hp-sub-nav-em, #hp-sub-nav-st{position: relative;}}

#hp-sub-nav-st {display: inline-block}

.hp-sub-nav-textcontainer {
	position: absolute;
	top: 0px;
	left: 15%;
	display: flex;
    justify-content: space-between;
    width: 72%;
	margin: auto;
	height: 90px;
}

.hp-jobseeker-sub-nav-label {
	display: inline;
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    line-height: 22px;
    color: white;
	margin-top: 34px;
	width:90px;
	z-index: 10
}

.hp-em-sub-nav-label,
.hp-st-sub-nav-label{
	display: inline;
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    line-height: 22px;
    color: white;
	margin-top: 34px;
	width:160px;
	z-index: 10
}

#hp-jobseeker-sub-nav1::after{	
	display: block;
	width: 90px;
	height: 2px;
	background-color: white;
	content: "";
    position: relative;
	left: -180px;
	top:5px;
	opacity: 0%;
	transition: all 0.6s ease-out;
}

#hp-em-sub-nav1::after,
#hp-st-sub-nav1::after{	
	display: block;
	width: 160px;
	height: 2px;
	background-color: white;
	content: "";
    position: relative;
	left: -180px;
	top:5px;
	opacity: 0%;
	transition: all 0.6s ease-out;
}

#hp-jobseeker-sub-nav1.hp-jobseeker-class-subnav1::after{	
	left: 0px;
	opacity: 100%
}

#hp-jobseeker-sub-nav1.hp-jobseeker-class-subnav2::after{	
	left: calc(24vw - 30px);
	opacity: 100%
}

#hp-jobseeker-sub-nav1.hp-jobseeker-class-subnav3::after{	
	left: calc(48vw - 60px);
	opacity: 100%
}

#hp-jobseeker-sub-nav1.hp-jobseeker-class-subnav4::after{	
	left: calc(72vw - 90px);
	opacity: 100%
}

#hp-jobseeker-sub-nav1-box,
#hp-jobseeker-sub-nav4-box{
	width: calc(12vw + 75px);
	display: inline-block;
	height: 90px;
	background-color: transparent;
	content: "";
    position: relative;
	left: 0px;
	top:0px;
	z-index: 100;
	cursor: pointer
}

#hp-jobseeker-sub-nav2-box,
#hp-jobseeker-sub-nav3-box {
	width: calc(24vw + 60px);
	display: inline-block;
	height: 90px;
	background-color: transparent;
	content: "";
    position: relative;
	left: 0px;
	top:0px;
	z-index: 100;
	cursor: pointer
}

#hp-em-sub-nav1.hp-employer-class-subnav1::after,
#hp-st-sub-nav1.hp-employer-class-subnav1::after{	
	left: 0px;
	opacity: 100%
}

#hp-em-sub-nav1.hp-employer-class-subnav2::after,
#hp-st-sub-nav1.hp-employer-class-subnav2::after{	
	left: calc(24vw - 52px);
	opacity: 100%
}

#hp-em-sub-nav1.hp-employer-class-subnav3::after,
#hp-st-sub-nav1.hp-employer-class-subnav3::after{	
	left: calc(48vw - 108px);
	opacity: 100%
}

#hp-em-sub-nav1.hp-employer-class-subnav4::after,
#hp-st-sub-nav1.hp-employer-class-subnav4::after{	
	left: calc(72vw - 160px);
	opacity: 100%
}


#hp-em-sub-nav1-box,
#hp-em-sub-nav4-box,
#hp-st-sub-nav1-box,
#hp-st-sub-nav4-box{
	width: calc(12vw + 33px);
	display: inline-block;
	height: 90px;
	background-color: transparent;
	content: "";
    position: relative;
	left: 0px;
	top:0px;
	z-index: 100;
	cursor: pointer
}

#hp-em-sub-nav2-box,
#hp-em-sub-nav3-box,
#hp-st-sub-nav2-box,
#hp-st-sub-nav3-box{
	width: calc(24vw - 33px);
	display: inline-block;
	height: 90px;
	background-color: transparent;
	content: "";
    position: relative;
	left: 0px;
	top:0px;
	z-index: 100;
	cursor: pointer
}

/*//// SECTIONS ////*/

.hp-section {
    display: block;
	position: relative;
	margin: auto;
	width: 86%;
	margin-bottom: 70px
}


.hp-section-blue {
	color: #021E9E
}

.hp-section-orange {
	color: #212529
}


.hp-section-text {
	font-size: 16px;
	font-weight: 500;
	font-family: Roboto, Arial;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
	letter-spacing: 1px;
	align-items:center;
	display: flex;
	z-index: 5;
	cursor: default
} 

.hp-section-text::after {
    content: "";
    width: 100%;
    display: block;
    border-bottom: 2px solid #021E9E;
    margin-left: 10px;
}

.hp-section-text.hp-extra-long::after {
    width: calc(100% - 145px);
}


.hp-section-text.hp-section-orange::after {
    content: "";
    width: 84%;
    display: block;
    border-bottom: 2px solid #212529;
}


.hp-gradient-background {
	background-image: linear-gradient(175deg,white, #f4f8ff);
	width: 100%;
	content: "";
	padding-bottom: 30px;
	margin-bottom: 60px
}

.hp-section-rowcontainer{
	display: flex;
    width: 80%;
    margin: auto;
	margin-bottom: 40px;
	justify-content: space-around
}

#hp-section-offer {
	width: 100vw
}


.hp-section-textcontainer{
	width: 40%;
	position: relative;
}


.hp-section-imagecontainer{
	width: 40%;
	max-width: 400px
}

.hp-section-imagecontainer.hp-medium{
	width: 45%;
	max-width: 425px
}

.hp-section-phonecontainer,
.hp-section-imagecontainer.hp-large{
	width: 50%;
	max-width: 480px
}

.hp-section-phone-img-group{
	position: relative
}

.hp-section-imagecontainer.hp-Xlarge{
	width: 55%;
	max-width: 600px
}


.hp-section-imagecontainer img {
		display: block; 
		width: 100%; 
		margin: auto;
}	

.hp-slide-animation {
	  transform: translateY(120px);
	  opacity: 0;
}

.hp-slide-animation.hp-opacity-only {
	  transform: translateY(0px);
}

.hp-step-card {
	  transform: translateY(120px);
}

.hp-process-visible .hp-step-card-1,
.hp-process-visible .hp-step-card-2,
.hp-process-visible .hp-step-card-3,
.hp-process-visible .hp-step-card-4 {
	  opacity: 0;
	  transform: translateY(120px);
  	  animation: come-in 0.4s ease forwards;
}


.hp-process-visible .hp-step-card-2 {animation-delay: 0.2s}
.hp-process-visible .hp-step-card-3 {animation-delay: 0.4s}
.hp-process-visible .hp-step-card-4 {animation-delay: 0.6s}

	
.hp-visible {
	  opacity: 0;
	  transform: translateY(120px);
  	  animation: come-in 0.8s ease forwards;
}

.hp-visible.hp-opacity-only {
	  opacity: 0;
	  transform: translateY(0px);
  	  animation: show-in 2s ease forwards;
}

@keyframes come-in {
  to { transform: translateY(0); opacity: 1}
}

@keyframes show-in {
  to { transform: translateY(0); opacity: 1}
}

.hp-phone-slide-mask{
	position: absolute;
	top: 30px;
	left: 200px;	
	width: 275px;
	height: 400px;
	overflow: hidden
}


.hp-phone-frame {z-index: 10}



.hp-phone-screen2,
.hp-phone-screen3 {
	opacity: 0;
}


.hp-phone-screen2.hp-screen-selected,
.hp-phone-screen3.hp-screen-selected{
	opacity: 1}


.hp-phone-screenx {
	position: absolute;
	top:0;
	left: 0		
}


.hp-section-title {
	text-align: left;
	margin-bottom: 20px;
	margin-top: 20%
}

.hp-section-paragraph {
	font-size: 20px;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
	line-height: 30px;
	color: #212529;
	-webkit-font-smoothing: antialiased;
	text-align: left;
	margin:0;
	z-index: 2;
	cursor: default
}


.hp-btn-section {
	display: block;
	width: 296px;
	margin: 0 auto;
	font-size: 22px;
	line-height: 28px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-align: center
}

.hp-btn-section.hp-btn-section-large {
	width: 310px
}

.hp-demo {
	width: 260px
}

.hp-technology-bottom {
	margin-bottom: 0px;
	padding-bottom: 0px
}

.hp-btncircle1,
.hp-btncircle2,
.hp-btncircle3 {
	height: 32px;
	width: 32px;
	display: inline-block;
    background-color: #C4C4C4;
    content: "";
	border-radius: 32px;
	margin: 10px 5px 0px 0px;
	cursor: pointer;	
}


.hp-btncircle1.hp-btncircle-selected,
.hp-btncircle2.hp-btncircle-selected,
.hp-btncircle3.hp-btncircle-selected {
	background-color: #2196F3
}

.hp-btncircle1:hover,
.hp-btncircle2:hover,
.hp-btncircle3:hover {
	background-color: #1058aa
}	


.hp-btncircle1:active,
.hp-btncircle2:active,
.hp-btncircle3:active {
	background-color: #1058aa;
	box-shadow: 0 0 0 4pt #C0D3F0	
}	


/*//// OFFER & PRIVACY SECTIONS ////*/


.hp-text-trade {
	FONT-WEIGHT: 600;
    TRANSFORM: translateY(-5px);
    position: absolute;
}

#video-offer,
#hp-backup-offer{
	width: 100%;
	min-width: 1300px;
	float: right
}

#hp-section-offer {
	position: relative;
	height: 580px;
	overflow: hidden;
	margin-bottom: -12px;
}

#video-privacy {
	min-width: 1300px;
	width: 100%;
	position: absolute;
	margin-top: -10px
}

#video-privacy-mobile {
	position: absolute;
	margin-top: -10px
}

.video-privacy-mask {
	position: relative;
	clip-path: polygon(0% 0%, 100% 5%, 100% 95%, 0% 100%);
	width: 100%;
	height: 500px;
	margin-bottom: 30px;		
}

#hp-section-offer .hp-section-text::after {
	border-bottom-color: white
}


#hp-section-offer .hp-section-textcontainer{
	position: absolute;
	top:30px;
	left: 14%;
	
}

#hp-section-privacy .hp-section-textcontainer.privacy{
	left: 50%;
	color: white;
	position: absolute;
	top: 5%
}

.hp-section-textcontainer.privacy .hp-section-title,
.hp-section-textcontainer.privacy .hp-section-paragraph {
	color: white
}

.hp-btn-offer{
	position: absolute;
    top: 460px;
    left: Calc(50% - 155px);
	width: 310px;
}

.hp-btn-privacy {
	display: inline-block;
	border-color: white;
    background-color: transparent;
    color: white;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
	padding: 15px 25px 13px 25px;
    border-width: 1px;
    border-style: solid;
    border-radius: 100px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
	margin-top: 30px
}

#hp-section-privacy {
	position: relative;
	width: 100vw;
	overflow: hidden;
}

#hp-section-privacy .hp-section {
	position: absolute;
	top: 50px;
	left: 7%;
	width: 86%;
	margin-bottom: 70px;
	color: white;
    display: block}

#hp-section-privacy .hp-section-text::after{
	border-bottom: 2px solid white
}

.privacy-underline {
    position: relative;
    display: inline-block}

.privacy-underline::after {
	content: "";
    position: absolute;
    top: 28px;
    left: 0;
    width: 100%;
    height: 10px;
    display: inline-block;
    animation: swoosh-animate 1s;
    border-bottom: 2px white solid;
}



#video-offer-mobile, #hp-backup-offer-mobile {width: 100%}

/*//// PRICING ////*/

.hp-section-pricing{
	display: flex;
	justify-content: space-between
}

.hp-pricing-container{
	display: flex;
	justify-content: space-around;
	margin-right: 7%;
	width: 55%;
	max-width: 660px;
	margin-bottom: 90px;
}

.hp-leftaligned-textcontainer {
	margin-left: 7%;
	width: 44%;
	padding-right: 30px;
    box-sizing: border-box;
}

.hp-leftaligned-title {
	font-size: 32px;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 500;
	line-height: 40px;
	color: #212529;
	-webkit-font-smoothing: antialiased;
	margin: 10% 0 20px 0;
	padding: 0;
	cursor: default
}

.hp-pricing-option{
	width: 45%;
	height: 425px;
	box-sizing: border-box;
	padding: 50px 20px 20px 20px;
	border-top: 10px #2196F3 solid;
	box-shadow: 0px 4px 4px #888888;
	position: relative;
  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;		
}

.hp-pricing-option:hover{
	background-color: #fbfcff
}



.hp-pricing-title{
	font-size: 18px;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 500;
	line-height: 36px;
	color: #212529;
	position: relative;
	margin-bottom: 20px;
	cursor: default
}

.hp-pricing-title::after{
	height: 2px;
	width: 110px;
	display: inline-block;
    background-color: #2196F3;
    content: "";
    position: absolute;
    left: 0px;
    top: 36px;
}

.hp-pricing-text {
	font-size: 16px;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
	line-height: 26px;
	color: #212529;
	cursor: default
}

.hp-pricing-regularprice {
	font-size: 20px;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
	line-height: 26px;
	color: #B8B8B8;
	text-decoration: line-through;
	margin: 20px 0 15px 0;
	position:absolute;
	bottom: 145px;
	cursor: default
}

.hp-pricing-discountedprice{
	font-size: 40px;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
	line-height: 40px;
	color: #00cc66;
	position:absolute;
	bottom: 110px;
	cursor: default
}

.hp-btn-pricing {
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 15px;
	padding-bottom: 13px;
	border-width: 1px;
	border-style: solid;
	border-radius: 100px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	cursor: pointer;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
	position:absolute;
	bottom: 40px;
	font-size: 16px;
	color: white
}


/*//// FOOTER ////*/


.hp-before-footer {
padding-bottom: 400px	
}



.hp-footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 400px;
	background-color:#000000;
	padding: 70px 10% 10px 10%;
	justify-content: space-between;
	box-sizing: border-box
}

.hp-footer-linkscontainer{
	display: flex
}

.hp-footer-logo {
	width: 32%;
	padding-left: 8%
}

.hp-footer-column {
	width: 20%;
}

.hp-footer-copyright,
.hp-footer-column-title,
.hp-footer-column-links{
	display: block;
	font-size: 16px;
	font-family: Roboto, Arial;
	font-weight: 400;
	line-height: 34px;
	color: #ffffffa6;
	-webkit-font-smoothing: antialiased;
	cursor: pointer;
	transition: all 0.5s ease-in-out;
}

.hp-footer-copyright {line-height: 22px;}

.hp-footer-column-links:hover{
	color: white
}

.hp-footer-copyright,
.hp-footer-column-title {
	color: white;
	cursor: default
}

.hp-footer-copyright {
	position: absolute;
	bottom: 30px;
	width: 80%;
	text-align: center
}

/*///// TRACKER /////*/


.hp-track-container {
	height: 370px;
	position: relative;
	margin-bottom: -70px;
	overflow: hidden;
	transform: translateY(-40px)
}

.hp-track-img{
	background: transparent url('/resources/images/professional/dashboard/hp-track.svg') 50% no-repeat;
	position: absolute;
	display: block;
	height: 267px;
	width: 316px;
	margin: 0 -158px;
	bottom: 90px;
	left: 41%
}

.hp-track-img::before,
.hp-track-img::after {
	background-color: #edf0f5;
	position: absolute;
	display: block;
	content: "";
	width: 100vw;
	height: 8px
}

.hp-track-img::before {
	bottom:0;
	right: 100%;
}

.hp-track-img::after {
	top:0;
	left: 100%;
}

.hp-website-track-point {
	position: absolute}

.hp-website-track-point-node {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5
}

.hp-outer-disc{
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background-color: #edf0f5;
	margin: -16px;
	animation: hp-outer-animation 10s infinite;
	
}

@keyframes hp-outer-animation {
    0% { background-color: #edf0f5; }
    10% { background-color: #21262a; }
    25% { background-color: #21262a; }
    35% { background-color: #edf0f5; }
    100% { background-color: #edf0f5; }
}


.hp-inner-disc{
	transform: scale(0);
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: #fff;
	margin: -10px;
	animation: hp-inner-animation 10s infinite;
}

@keyframes hp-inner-animation {
    0% { transform: scale(0); }
    10% { transform: scale(1); }
    25% { transform: scale(1); }
    35% { transform: scale(0); }
    100% { transform: scale(0); }
}


.hp-website-track-point-node .hp-outer-disc,
.hp-website-track-point-node .hp-inner-disc {
	transition: all .5s cubic-bezier(.645,.045,.355,1);
	position: absolute;
	left: 0;
	top:0
}

.hp-website-track-point-text {
	transition: all .5s cubic-bezier(.645,.045,.355,1);
    transform: translate(-50%,56px);
    background-color: #21262a;
    color: #fff;
    border-radius: 16px;
    white-space: nowrap;
    line-height: 32px;
    font-size: 16px;
	font-weight: 500;
    padding: 0 16px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
	font-family: Roboto, Arial;
	-webkit-font-smoothing: antialiased;
	animation: hp-text-animation 10s infinite;
}

@keyframes hp-text-animation {
    0% { transform: translate(-50%,56px); opacity: 0; }
    10% { transform: translate(-50%,24px); opacity: 1; }
    25% { transform: translate(-50%,24px); opacity: 1; }
    35% { transform: translate(-50%,56px); opacity: 0; }
    100% { transform: translate(-50%,56px); opacity: 0; }
}

.hp-outer-disc.delay3s,
.hp-inner-disc.delay3s,
.hp-website-track-point-text.delay3s{
	animation-delay: 2500ms
}

.hp-outer-disc.delay6s,
.hp-inner-disc.delay6s,
.hp-website-track-point-text.delay6s{
	animation-delay: 5000ms
}

.hp-outer-disc.delay9s,
.hp-inner-disc.delay9s,
.hp-website-track-point-text.delay9s{
	animation-delay: 7500ms
}

/*//// MOBILE TRACKER ////*/


@media ( max-width: 739px) {

.hp-track-container {
	display: none}
	
	
.hp-track-mobile-container {
	height: 450px;
	position: relative;
	margin-top: 30px;
	overflow: hidden;

}

.hp-track-mobile-img{
	background: transparent url('/resources/images/professional/dashboard/hp-track-mobile.svg') 50% no-repeat;
	position: absolute;
	display: block;
	height: 450px;
	width: 10px;
	margin: 0px;
	bottom: 0px;
	left: Calc(50% - 5px)
}

.hp-website-mobile-track-point {
	position: absolute}

.hp-website-mobile-track-point-node {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5
}

.hp-website-mobile-track-point-node .hp-outer-disc,
.hp-website-mobile-track-point-node .hp-inner-disc {
	transition: all .5s cubic-bezier(.645,.045,.355,1);
	position: absolute;
	left: 0;
	top:0
}


.hp-website-mobile-track-point-text {
	transition: all .5s cubic-bezier(.645,.045,.355,1);
    transform: translate(-50%,56px);
    background-color: #21262a;
    color: #fff;
    border-radius: 16px;
    white-space: nowrap;
    line-height: 32px;
    font-size: 16px;
	font-weight: 500;
    padding: 0 16px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
	font-family: Roboto, Arial;
	-webkit-font-smoothing: antialiased;
	animation: hp-text-animation 10s infinite;
}

.hp-outer-disc.delay3s,
.hp-inner-disc.delay3s,
.hp-website-mobile-track-point-text.delay3s{
	animation-delay: 2500ms
}

.hp-outer-disc.delay6s,
.hp-inner-disc.delay6s,
.hp-website-mobile-track-point-text.delay6s{
	animation-delay: 5000ms
}

.hp-outer-disc.delay9s,
.hp-inner-disc.delay9s,
.hp-website-mobile-track-point-text.delay9s{
	animation-delay: 7500ms
}
}

/*//// EMPLOYER POLYGON ///*/

.hp-ready.hp-polygon,
.hp-section-rowcontainer.hp-polygon {
	background-image: linear-gradient(to right, #00cea6 , #bef7e9);
	margin: 0;
	padding: 70px 10% 70px 10%;
	width: 100vw;
	box-sizing: border-box;
}

.hp-ready.hp-polygon.blue {
	background-image: linear-gradient(25deg, #142fc0 , #001b88);
}

.hp-ready.hp-polygon.EmNight {
	background-image: linear-gradient(90deg, #000d22, #010e34);
}

.hp-ready.hp-polygon.hardblue {
	background-image: linear-gradient(25deg, #021c42 , #0059a9);
}


.hp-section-top-triangle{
	height: 90px;
    width: 100vw;
	box-sizing: border-box;
	margin-bottom: -1px;
	background-image: linear-gradient(to right, #00cea6 , #bef7e9);
	clip-path: polygon(100% 0,0 100%,100% 100%)
}

.hp-section-bottom-triangle{
	height: 50px;
    width: 100vw;
	box-sizing: border-box;	
	margin-top: -1px;
	background-image: linear-gradient(to right, #00cea6 , #bef7e9);
	clip-path: polygon(0% -100%,0% 100%,100% 0%);
	margin-bottom:70px;
}

@keyframes hp-text-animation {
    0% { transform: translate(-50%,56px); opacity: 0; }
    10% { transform: translate(-50%,24px); opacity: 1; }
    25% { transform: translate(-50%,24px); opacity: 1; }
    35% { transform: translate(-50%,56px); opacity: 0; }
    100% { transform: translate(-50%,56px); opacity: 0; }
}

/*/// EMPLOYER READY ///*/

.hp-ready{
    overflow: hidden;
	display: flex;
	justify-content: space-between
}

.hp-ready p,
.hp-ready h2 {
	color: white
}

.hp-ready-btn,
.hp-ready-staff-btn{
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
	margin-left: 15px;
    -webkit-font-smoothing: antialiased;
	top: 50%;
    transform: translateY(-50%);
}


/*//// QUOTES ////*/


.hp-staff-polygon1 {
	clip-path: polygon(0% 0%, 100% 6%, 100% 94%, 0% 100%);
	background-image: linear-gradient(to right, #01173c , #005098);
	height: 460px;
}

.hp-staff-polygon2 {
	clip-path: polygon(0% 6%, 100% 0%, 100% 100%, 0% 96%);
	background-image: linear-gradient(to right, #01173c , #060e34);
	height: 460px;
}

.hp-staff-polygon3 {
	clip-path: polygon(0% 0%, 100% 6%, 100% 94%, 0% 100%);
	background-image: linear-gradient(25deg, #01173b , #005098);
	height: 460px;
}
	
.hp-quote-rowcontainer {	
	width: 100%;
	margin:0;
	padding: 0 7% 0 7%;
	box-sizing: border-box;
	position: relative;	
	margin-bottom: 60px
}

.hp-quote-textcontainer{
	width: 40%;
	position: absolute;
	top: 40%;
	left: 10%;
	transform: translateY(-60%);
}

.hp-quote-textcontainer-rev{
	width: 40%;
	position: absolute;
	top: 40%;
	transform: translateY(-60%);
}

.hp-quote-mark {
	position: relative;
	transform: translate(-16px, 20px);
	height: 35px
}

.hp-quote {
	font-size: 32px;
    font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 46px;
    -webkit-font-smoothing: antialiased;
    text-align: left;
	color: transparent;
	position: relative;
	z-index: 2;
}

#hp-quoteAlt2, #hp-quoteAlt4, #hp-quoteAlt6 {display:none}

#hp-quoteAlt1.displayNone{display: none}
#hp-quoteAlt2.displayShow{display: contents}
#hp-quoteAlt3.displayNone{display: none}
#hp-quoteAlt4.displayShow{display: contents}
#hp-quoteAlt5.displayNone{display: none}
#hp-quoteAlt6.displayShow{display: contents}


.hp-write {
	color: transparent
}

.hp-write::after {
	width: 20px;
	height: 38px;
	background-color: transparent;
	content: "";
	display: inline-block;
	position: absolute;
	top:0;
	left: 0;
	animation: hp-type 10s infinite;
	animation-timing-function: step-start
}


.hp-write.hp-orange::after {
	width: 20px;
	height: 38px;
	background-color: transparent;
	content: "";
	display: inline-block;
	position: absolute;
	top:0;
	left: 0;
	animation: hp-type-orange 10s infinite;
	animation-timing-function: step-start
}

@keyframes hp-type {
    0% { background-color: transparent }
    1% { background-color: #00A3F4}
    2% { background-color: transparent}
	3% { background-color: transparent}
    4% { background-color: transparent}
    100% {background-color: transparent}
}

@keyframes hp-type-orange {
    0% { background-color: transparent }
    1% { background-color: #e87d1d}
    2% { background-color: transparent}
	3% { background-color: transparent}
    4% { background-color: transparent}
    100% {background-color: transparent}
}


.q1.hp-write::after{animation: hp-type-start 10s infinite;}
.q1.hp-write.hp-orange::after{animation: hp-type-start-orange 10s infinite;}
.q2.hp-write::after{animation-delay: 1520ms}
.q3.hp-write::after{animation-delay: 1600ms}
.q4.hp-write::after{animation-delay: 1680ms}
.q5.hp-write::after{animation-delay: 1760ms}
.q6.hp-write::after{animation-delay: 1840ms}
.q7.hp-write::after{animation-delay: 1920ms}
.q8.hp-write::after{animation-delay: 2000ms}
.q9.hp-write::after{animation-delay: 2080ms}
.q10.hp-write::after{animation-delay: 2160ms}
.q11.hp-write::after{animation-delay: 2240ms}
.q12.hp-write::after{animation-delay: 2320ms}
.q13.hp-write::after{animation-delay: 2400ms}
.q14.hp-write::after{animation-delay: 2480ms}
.q15.hp-write::after{animation-delay: 2560ms}
.q16.hp-write::after{animation-delay: 2640ms}
.q17.hp-write::after{animation-delay: 2720ms}
.q18.hp-write::after{animation-delay: 2800ms}
.q19.hp-write::after{animation-delay: 2880ms}
.q20.hp-write::after{animation-delay: 2960ms}
.q21.hp-write::after{animation-delay: 3040ms}
.q22.hp-write::after{animation-delay: 3120ms}
.q23.hp-write::after{animation-delay: 3200ms}
.q24.hp-write::after{animation-delay: 3280ms}
.q25.hp-write::after{animation-delay: 3360ms}
.q26.hp-write::after{animation-delay: 3440ms}
.q27.hp-write::after{animation-delay: 3520ms}
.q28.hp-write::after{animation-delay: 3600ms}
.q29.hp-write::after{animation-delay: 3680ms}
.q30.hp-write::after{animation-delay: 3760ms}
.q31.hp-write::after{animation-delay: 3840ms}
.q32.hp-write::after{animation-delay: 3920ms}
.q33.hp-write::after{animation-delay: 4000ms}
.q34.hp-write::after{animation-delay: 4080ms}
.q35.hp-write::after{animation-delay: 4160ms}
.q36.hp-write::after{animation-delay: 4240ms}
.q37.hp-write::after{animation-delay: 4320ms}
.q38.hp-write::after{animation-delay: 4400ms}
.q39.hp-write::after{animation-delay: 4480ms}
.q40.hp-write::after{animation-delay: 4560ms}
.q41.hp-write::after{animation-delay: 4640ms}
.q42.hp-write::after{animation-delay: 4720ms}
.q43.hp-write::after{animation-delay: 4800ms}
.q44.hp-write::after{animation-delay: 4880ms}
.q45.hp-write::after{animation-delay: 4960ms}
.q46.hp-write::after{animation-delay: 5040ms}
.q47.hp-write::after{animation-delay: 5120ms}
.q48.hp-write::after{animation-delay: 5200ms}
.q49.hp-write::after{animation-delay: 5280ms}
.q50.hp-write::after{animation-delay: 5360ms}
.q51.hp-write::after{animation-delay: 5440ms}
.q52.hp-write::after{animation-delay: 5520ms}
.q53.hp-write::after{animation-delay: 5600ms}
.q54.hp-write::after{animation-delay: 5680ms}
.q55.hp-write::after{animation-delay: 5760ms}
.q56.hp-write::after{animation-delay: 5840ms}
.q57.hp-write::after{animation-delay: 5920ms}
.q58.hp-write::after{animation-delay: 6000ms}
.q59.hp-write::after{animation-delay: 6080ms}
.q60.hp-write::after{animation-delay: 6160ms}
.q61.hp-write::after{animation-delay: 6240ms}
.q62.hp-write::after{animation-delay: 6320ms}
.q63.hp-write::after{animation-delay: 7000ms}
.q64.hp-write::after{animation-delay: 7080ms}
.q65.hp-write::after{animation-delay: 7160ms}
.q66.hp-write::after{animation-delay: 7240ms}
.q67.hp-write::after{animation-delay: 7320ms}
.q68.hp-write::after{animation-delay: 7400ms}
.q69.hp-write::after{animation-delay: 7480ms}
.q70.hp-write::after{animation-delay: 7560ms}



@keyframes hp-type-start {
    0% { background-color: transparent }
    1% { background-color: #00A3F4}
    4% { background-color: transparent}
	7% { background-color: #00A3F4}
    10% { background-color: transparent}
    100% {background-color: transparent}
}

@keyframes hp-type-start-orange {
    0% { background-color: transparent }
    1% { background-color: #e87d1d}
    4% { background-color: transparent}
	7% { background-color: #e87d1d}
    10% { background-color: transparent}
    100% {background-color: transparent}
}

.hp-write.q1{color: transparent;animation: hp-text-type1 10s infinite;}
.hp-write.q2{color: transparent;animation: hp-text-type2 10s infinite;}
.hp-write.q3{color: transparent;animation: hp-text-type3 10s infinite;}
.hp-write.q4{color: transparent;animation: hp-text-type4 10s infinite;}
.hp-write.q5{color: transparent;animation: hp-text-type5 10s infinite;}
.hp-write.q6{color: transparent;animation: hp-text-type6 10s infinite;}
.hp-write.q7{color: transparent;animation: hp-text-type7 10s infinite;}
.hp-write.q8{color: transparent;animation: hp-text-type8 10s infinite;}
.hp-write.q9{color: transparent;animation: hp-text-type9 10s infinite;}
.hp-write.q10{color: transparent;animation: hp-text-type10 10s infinite;}
.hp-write.q11{color: transparent;animation: hp-text-type11 10s infinite;}
.hp-write.q12{color: transparent;animation: hp-text-type12 10s infinite;}
.hp-write.q13{color: transparent;animation: hp-text-type13 10s infinite;}
.hp-write.q14{color: transparent;animation: hp-text-type14 10s infinite;}
.hp-write.q15{color: transparent;animation: hp-text-type15 10s infinite;}
.hp-write.q16{color: transparent;animation: hp-text-type16 10s infinite;}
.hp-write.q17{color: transparent;animation: hp-text-type17 10s infinite;}
.hp-write.q18{color: transparent;animation: hp-text-type18 10s infinite;}
.hp-write.q19{color: transparent;animation: hp-text-type19 10s infinite;}
.hp-write.q20{color: transparent;animation: hp-text-type20 10s infinite;}
.hp-write.q21{color: transparent;animation: hp-text-type21 10s infinite;}
.hp-write.q22{color: transparent;animation: hp-text-type22 10s infinite;}
.hp-write.q23{color: transparent;animation: hp-text-type23 10s infinite;}
.hp-write.q24{color: transparent;animation: hp-text-type24 10s infinite;}
.hp-write.q25{color: transparent;animation: hp-text-type25 10s infinite;}
.hp-write.q26{color: transparent;animation: hp-text-type26 10s infinite;}
.hp-write.q27{color: transparent;animation: hp-text-type27 10s infinite;}
.hp-write.q28{color: transparent;animation: hp-text-type28 10s infinite;}
.hp-write.q29{color: transparent;animation: hp-text-type29 10s infinite;}
.hp-write.q30{color: transparent;animation: hp-text-type30 10s infinite;}
.hp-write.q31{color: transparent;animation: hp-text-type31 10s infinite;}
.hp-write.q32{color: transparent;animation: hp-text-type32 10s infinite;}
.hp-write.q33{color: transparent;animation: hp-text-type33 10s infinite;}
.hp-write.q34{color: transparent;animation: hp-text-type34 10s infinite;}
.hp-write.q35{color: transparent;animation: hp-text-type35 10s infinite;}
.hp-write.q36{color: transparent;animation: hp-text-type36 10s infinite;}
.hp-write.q37{color: transparent;animation: hp-text-type37 10s infinite;}
.hp-write.q38{color: transparent;animation: hp-text-type38 10s infinite;}
.hp-write.q39{color: transparent;animation: hp-text-type39 10s infinite;}
.hp-write.q40{color: transparent;animation: hp-text-type40 10s infinite;}
.hp-write.q41{color: transparent;animation: hp-text-type41 10s infinite;}
.hp-write.q42{color: transparent;animation: hp-text-type42 10s infinite;}
.hp-write.q43{color: transparent;animation: hp-text-type43 10s infinite;}
.hp-write.q44{color: transparent;animation: hp-text-type44 10s infinite;}
.hp-write.q45{color: transparent;animation: hp-text-type45 10s infinite;}
.hp-write.q46{color: transparent;animation: hp-text-type46 10s infinite;}
.hp-write.q47{color: transparent;animation: hp-text-type47 10s infinite;}
.hp-write.q48{color: transparent;animation: hp-text-type48 10s infinite;}
.hp-write.q49{color: transparent;animation: hp-text-type49 10s infinite;}
.hp-write.q50{color: transparent;animation: hp-text-type50 10s infinite;}
.hp-write.q51{color: transparent;animation: hp-text-type51 10s infinite;}
.hp-write.q52{color: transparent;animation: hp-text-type52 10s infinite;}
.hp-write.q53{color: transparent;animation: hp-text-type53 10s infinite;}
.hp-write.q54{color: transparent;animation: hp-text-type54 10s infinite;}
.hp-write.q55{color: transparent;animation: hp-text-type55 10s infinite;}
.hp-write.q56{color: transparent;animation: hp-text-type56 10s infinite;}
.hp-write.q57{color: transparent;animation: hp-text-type57 10s infinite;}
.hp-write.q58{color: transparent;animation: hp-text-type58 10s infinite;}
.hp-write.q59{color: transparent;animation: hp-text-type59 10s infinite;}
.hp-write.q60{color: transparent;animation: hp-text-type60 10s infinite;}
.hp-write.q61{color: transparent;animation: hp-text-type61 10s infinite;}
.hp-write.q62{color: transparent;animation: hp-text-type62 10s infinite;}
.hp-write.q63{color: transparent;animation: hp-text-type63 10s infinite;}
.hp-write.q64{color: transparent;animation: hp-text-type64 10s infinite;}
.hp-write.q65{color: transparent;animation: hp-text-type65 10s infinite;}
.hp-write.q66{color: transparent;animation: hp-text-type66 10s infinite;}
.hp-write.q67{color: transparent;animation: hp-text-type67 10s infinite;}
.hp-write.q68{color: transparent;animation: hp-text-type68 10s infinite;}
.hp-write.q69{color: transparent;animation: hp-text-type69 10s infinite;}
.hp-write.q70{color: transparent;animation: hp-text-type70 10s infinite;}



@keyframes hp-text-type1 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 97% { color: white} 98% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type2 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 96% { color: white} 97% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type3 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 95% { color: white} 96% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type4 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 94% { color: white} 95% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type5 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 93% { color: white} 94% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type6 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 92% { color: white} 93% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type7 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 91% { color: white} 92% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type8 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 90% { color: white} 91% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type9 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 89% { color: white} 90% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type10 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 88% { color: white} 89% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type11 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 87% { color: white} 88% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type12 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 86% { color: white} 87% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type13 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 85% { color: white} 86% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type14 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 84% { color: white} 85% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type15 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 83% { color: white} 84% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type16 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 82% { color: white} 83% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type17 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 81% { color: white} 82% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type18 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 80% { color: white} 81% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type19 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 79% { color: white} 80% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type20 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 78% { color: white} 79% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type21 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 77% { color: white} 78% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type22 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 76% { color: white} 77% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type23 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 75% { color: white} 76% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type24 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 74% { color: white} 75% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type25 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 73% { color: white} 74% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type26 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 72% { color: white} 73% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type27 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 71% { color: white} 72% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type28 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 70% { color: white} 71% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type29 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 69% { color: white} 70% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type30 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 68% { color: white} 69% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type31 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 67% { color: white} 68% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type32 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 66% { color: white} 67% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type33 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 65% { color: white} 66% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type34 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 64% { color: white} 65% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type35 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 63% { color: white} 64% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type36 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 62% { color: white} 63% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type37 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 61% { color: white} 62% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type38 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 60% { color: white} 61% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type39 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 59% { color: white} 60% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type40 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 58% { color: white} 59% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type41 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 57% { color: white} 58% { color: transparent} 100% { color: transparent}}
@keyframes hp-text-type42 {1% { color: transparent} 15% { color: transparent} 16% { color: white} 56% { color: white} 57% { color: transparent} 100% { color: transparent}}

.q2.hp-write{animation-delay: 80ms}
.q3.hp-write{animation-delay: 160ms}
.q4.hp-write{animation-delay: 240ms}
.q5.hp-write{animation-delay: 320ms}
.q6.hp-write{animation-delay: 400ms}
.q7.hp-write{animation-delay: 480ms}
.q8.hp-write{animation-delay: 560ms}
.q9.hp-write{animation-delay: 640ms}
.q10.hp-write{animation-delay: 720ms}
.q11.hp-write{animation-delay: 800ms}
.q12.hp-write{animation-delay: 880ms}
.q13.hp-write{animation-delay: 960ms}
.q14.hp-write{animation-delay: 1040ms}
.q15.hp-write{animation-delay: 1120ms}
.q16.hp-write{animation-delay: 1200ms}
.q17.hp-write{animation-delay: 1280ms}
.q18.hp-write{animation-delay: 1360ms}
.q19.hp-write{animation-delay: 1440ms}
.q20.hp-write{animation-delay: 1520ms}
.q21.hp-write{animation-delay: 1600ms}
.q22.hp-write{animation-delay: 1680ms}
.q23.hp-write{animation-delay: 1760ms}
.q24.hp-write{animation-delay: 1840ms}
.q25.hp-write{animation-delay: 1920ms}
.q26.hp-write{animation-delay: 2000ms}
.q27.hp-write{animation-delay: 2080ms}
.q28.hp-write{animation-delay: 2160ms}
.q29.hp-write{animation-delay: 2240ms}
.q30.hp-write{animation-delay: 2320ms}
.q31.hp-write{animation-delay: 2400ms}
.q32.hp-write{animation-delay: 2480ms}
.q33.hp-write{animation-delay: 2560ms}
.q34.hp-write{animation-delay: 2640ms}
.q35.hp-write{animation-delay: 2720ms}
.q36.hp-write{animation-delay: 2800ms}
.q37.hp-write{animation-delay: 2880ms}
.q38.hp-write{animation-delay: 2960ms}
.q39.hp-write{animation-delay: 3040ms}
.q40.hp-write{animation-delay: 3120ms}
.q41.hp-write{animation-delay: 3200ms}
.q42.hp-write{animation-delay: 3280ms}
.q43.hp-write{animation-delay: 3360ms}
.q44.hp-write{animation-delay: 3440ms}
.q45.hp-write{animation-delay: 3520ms}
.q46.hp-write{animation-delay: 3600ms}
.q47.hp-write{animation-delay: 3680ms}
.q48.hp-write{animation-delay: 3760ms}
.q49.hp-write{animation-delay: 3840ms}
.q50.hp-write{animation-delay: 3920ms}
.q51.hp-write{animation-delay: 4000ms}
.q52.hp-write{animation-delay: 4080ms}
.q53.hp-write{animation-delay: 4160ms}
.q54.hp-write{animation-delay: 4240ms}
.q55.hp-write{animation-delay: 4320ms}
.q56.hp-write{animation-delay: 4400ms}
.q57.hp-write{animation-delay: 4480ms}
.q58.hp-write{animation-delay: 4560ms}
.q59.hp-write{animation-delay: 4640ms}
.q60.hp-write{animation-delay: 4720ms}
.q61.hp-write{animation-delay: 4800ms}
.q62.hp-write{animation-delay: 4880ms}
.q63.hp-write{animation-delay: 4960ms}
.q64.hp-write{animation-delay: 5040ms}
.q65.hp-write{animation-delay: 5120ms}
.q66.hp-write{animation-delay: 5200ms}
.q67.hp-write{animation-delay: 5280ms}
.q68.hp-write{animation-delay: 5360ms}
.q69.hp-write{animation-delay: 5440ms}
.q70.hp-write{animation-delay: 5520ms}




.hp-quote.q42.qLast1.hp-write::after {animation: hp-type-end1 10s infinite;}
.hp-quote.q43.qLast2.hp-write::after{animation: hp-type-end2 10s infinite;}
.hp-quote.q26.qLast3.hp-write::after{animation: hp-type-end3 10s infinite;}
.hp-quote.q19.qLast4.hp-write::after{animation: hp-type-end4 10s infinite;}
.hp-quote.q20.qLast5.hp-write::after{animation: hp-type-end4 10s infinite;}
.hp-quote.q22.qLast6.hp-write::after{animation: hp-type-end4 10s infinite;}


@keyframes hp-type-end1 {
    0% { background-color: transparent }
    46% { background-color: transparent}
	49% { background-color: #00A3F4}
    52% { background-color: transparent}
    55% { background-color: #00A3F4}
    58% { background-color: transparent}
	61% { background-color: #00A3F4}
    64% { background-color: transparent}
	67% { background-color: #00A3F4}
    70% { background-color: transparent}
    73% { background-color: #00A3F4}
    76% { background-color: transparent}
	79% { background-color: #00A3F4}
    82% { background-color: transparent}	
	85% { background-color: #00A3F4}
    88% { background-color: transparent}	
    100% {background-color: transparent}
}

@keyframes hp-type-end2 {
    0% { background-color: transparent }
    52% { background-color: transparent}
    55% { background-color: #00A3F4}
    58% { background-color: transparent}
	61% { background-color: #00A3F4}
    64% { background-color: transparent}
	67% { background-color: #00A3F4}
    70% { background-color: transparent}
    73% { background-color: #00A3F4}
    76% { background-color: transparent}
	79% { background-color: #00A3F4}
    82% { background-color: transparent}
	85% { background-color: #00A3F4}
    88% { background-color: transparent}	
    100% {background-color: transparent}
}

@keyframes hp-type-end3 {
    0% { background-color: transparent}
    38% { background-color: transparent}
    41% { background-color: #e87d1d}
    44% { background-color: transparent}
	47% { background-color: #e87d1d}
    50% { background-color: transparent}	
    53% { background-color: #e87d1d}
    56% { background-color: transparent}
	59% { background-color: #e87d1d}
    62% { background-color: transparent}
    65% { background-color: #e87d1d}
    68% { background-color: transparent}
	71% { background-color: #e87d1d}
    74% { background-color: transparent}
    77% { background-color: #e87d1d}
    80% { background-color: transparent}
    83% { background-color: #e87d1d}
    86% { background-color: transparent}	
    100% {background-color: transparent}
}


@keyframes hp-type-end4 {
    0% { background-color: transparent}
    32% { background-color: transparent}
    35% { background-color: #e87d1d}	
    38% { background-color: transparent}
    41% { background-color: #e87d1d}
    44% { background-color: transparent}
	47% { background-color: #e87d1d}
    50% { background-color: transparent}	
    53% { background-color: #e87d1d}
    56% { background-color: transparent}
	59% { background-color: #e87d1d}
    62% { background-color: transparent}
    65% { background-color: #e87d1d}
    68% { background-color: transparent}
	71% { background-color: #e87d1d}
    74% { background-color: transparent}
    77% { background-color: #e87d1d}
    80% { background-color: transparent}
    83% { background-color: #e87d1d}
    86% { background-color: transparent}
    89% { background-color: #e87d1d}
    92% { background-color: transparent}	
    100% {background-color: transparent}
}


.hp-quote-labelcontainer {
	width: 200px;
	position: absolute;
	bottom: 10%;
}

.hp-quote-labelcontainer-rev {
	width: 200px;
	position: absolute;
	bottom: 10%;
}

.hp-quote-labelcontainer-XL {
	width: 200px;
	position: absolute;
	bottom: 10%;
}

.hp-quote-logo{
	margin-bottom: 20px
}

.hp-quote-name {
	font-size: 18px;
    font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 24px;
    color: white;
    -webkit-font-smoothing: antialiased;
    text-align: left;
    margin: 0;
}

.hp-quote-photocontainer{
	position: absolute;
	bottom: 0;
	right: 15%
}

.hp-quote-photocontainer-rev{
	position: absolute;
	bottom: 0;
	left: 13%
}

/*// QUOTE MOBILE //*/
@media ( min-width: 740px) {
	.hp-quote-textcontainer-rev{right: 10%;}
	.hp-quote-labelcontainer{right: calc(15% + 300px)}
	.hp-quote-labelcontainer-rev{left: calc(15% + 380px)}
	.hp-quote-labelcontainer-XL{right: calc(15% + 340px)}
	.hp-ready-staff-btn{width: 260px}
}

@media ( max-width: 739px) {
	.hp-quote-textcontainer{width: 80%}
	.hp-quote-textcontainer-rev{width: 80%; left: 10%;}
	.hp-quote-labelcontainer{left: 10%}
	.hp-quote-labelcontainer-rev {left: 10%}
	.hp-quote-labelcontainer-XL{left: 10%}	
	.hp-quote-photocontainer{display: none}
	.hp-quote-photocontainer-rev{display: none}	

	.hp-ready-staff-btn {
    transform: translateY(0px);
    padding-left: 0px;
    padding-right: 0px;
    width: 260px;
    margin-top: 20px !important;}
	
	.hp-write::after {width: 18px; height: 30px;}
	.hp-write.hp-orange::after {width: 18px;height: 30px;}
	
}


/*//// MOBILE ////*/

/*/// MOBILE OVERLAY ///*/


.mobile-nav-overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 450;
  top: 0;
  left: 0;
  background-color: white;
  overflow-y: hidden;
  transition: 0.5s;
}

.mobile-nav-overlay-content {
  position: relative;
  top: 20%;
  text-align: center;
  width: 270px;
	margin-left: auto;
	margin-right: auto
}

.mobile-nav-overlay a {
  	color: #212529;
	font-family: Roboto, Arial;
	padding: 10px 15px;
 	text-decoration: none;
  	font-size: 20px;
  	line-height: 24px;
  	display: block;
  	transition: 0.3s;
	margin-bottom: 20px;
	cursor: pointer
}


.mobile-nav-overlay  a:hover, .mobile-nav-overlay a:focus {
  background-color: #F8FAFE;
	text-decoration: none;
	border-radius: 5px;
	color: #1058aa
}

.mobile-nav-overlay  a:active {
  background-color: #F8FAFE;
	border-radius: 5px;
	color: #1058aa
}

.mobile-nav-overlay .closebtn {
	color: #212529;
  	width: 25px;
	position: absolute;
	right: 7%;
	cursor: pointer;
	margin-top: 26px;
	text-align: center;
	padding: 0;
	font-size: 38px;
	border-radius: 0px
}

@media ( min-width: 740px) {	
.mobile-nav-overlay .closebtn {
	margin-top: 36px;
	}}

.mobile-nav-overlay .closebtn:hover{
	color: #1058aa}


#mobile-nav-overlay-buttons {
	position: absolute;
	flex-direction: column;
	bottom: 5%;
	width: 86%;
	display: none;
	align-items: center;
	margin: 0 7% 0 7%;
}

#mobile-nav-overlay-buttons .hp-mobile-2btns {
	font-size: 17px;
	line-height: 21px;
	font-weight: 500;
	margin: 10px 0 0 0;
	width: 100%;
	text-align: center
}

/*/// END MOBILE OVERLAY ///*/
/*//// CON'T MOBILE ////*/


@media ( max-width: 1039px) {
.hp-pricing-option {
	width: 47%}
.hp-pricing-container{
		justify-content: space-between
	}	
		
.hp-sub-nav-textcontainer {
		left: 4%;
		width: 92%	
	}	

#hp-jobseeker-sub-nav1::after,
#hp-em-sub-nav1::after,
#hp-st-sub-nav1::after{	
		display: none;}
}


.hp-ready-btn-container .hp-ready-btn.signup {position: relative}

@media ( min-width: 1920px) {

#video-main-js, #video-offer, #video-privacy, #video-main-st {width: 100vw}

}

@media ( max-width: 739px) {
	#video-main-js, #video-offer, #video-privacy, #video-main-st {display: none}
	.hp-btn-offer {top: 480px}
	
	.hp-jobseeker-sub-nav-label,
	.hp-em-sub-nav-label,
	.hp-st-sub-nav-label{
		margin:auto;
		font-size: 15px
	}
	
	.hp-ready-btn-container{
	display: flex;
    justify-content: space-between;
	}
		
	.video-privacy-mask {
	position: relative;
	clip-path: polygon(0% 0%, 100% 5%, 100% 95%, 0% 100%);
	width: 100%;
	height: 625px;
	margin-bottom: 30px;}
	
}

@media ( min-width: 1039px) {
	.mobile-nav-overlay,
	.header-mobile-overlay-mask {
		display: none
	}}

@media ( min-width: 740px) {	
	.mobileOnly {
		display: none !important
	}	
	.hp-btn-primarybck {
		margin-right: 15px
	}
	
.hp-ready-btn-container {position: relative; width: 295px}	
.hp-ready-btn.hp-OnlyOneBtn, .hp-ready-staff-btn {position: absolute; top: 50%; transform: translateY(-50%); right: 0; margin: 0}
	
}


@media (max-width:739px){
	
	.desktopOnly,
	.hp-btn-primarybck.desktopOnly,
	#hp-TopNavigation-Tabs-Wrapper-Out,
	.hp-TopNavigation-buttons{
		display: none !important
	}
	
	#hp-TopNavigation-Wrapper{
		padding-top: 15px;		
	}
	.hp-TopNavigation-WhiteBckg{
		height: 73px
	}

	.header-mobile-overlay-mask {
		position:fixed;
		Top: 0px;
		left: 0;
		height: 80px;
		width: 100%;
		background-color: white;
		z-index: 439;
		border-bottom: 1px solid #516775
	}	
	
	.hp-TopNavigation-WhiteBckg.noTabSelector {
		display: none
	}
	
	.hp-landing-msg h1{
		font-size: 32px;
		line-height: 40px;
		text-align: center
	}
	.hp-landing-msg{
		position: absolute;
		top: calc(42% + 40px);
		width: 100%;
    	margin-left: 0;
	}
	
	
	.hp-landing-msg h4{
		font-size: 24px;
		line-height: 30px;
		text-align: center
	}
	
	#hp-landing-msg-js .hp-btn-primarybck.signup {width: 90%}
	#hp-landing-msg-em .hp-btn-primarybck {width: 260px}
	
	.hp-btn-container {
		display: flex;
		justify-content: space-between
	}
	
	.hp-btn-primarybck {
		margin: auto;
		display: block
	}
	
	
	.hp-section-title, .hp-quote, .hp-stats h2, .hp-process h2 {
		font-size: 24px;
		line-height: 30px;
		margin: 0 0 10px 0;
		cursor: default
	}
	
	.hp-section-rowcontainer,	
	.hp-stats-Allcontainer {
		flex-direction: column
	}
	
	.hp-stats h2,
	.hp-process h2 {
		width: 90%;
		margin: auto
	}
	
	
	.hp-stats-Allcontainer,
	.hp-process-Allcontainer {
		width: 90%	
	}

	.hp-process {
		padding-bottom: 0px;
		padding-top: calc(348px + 90vw * 1057 / 816 - 75vh + 70px);
		margin-top: 35px;
	}
	
	.hp-process-Allcontainer {
		display: block
	}
	
	.hp-stats-Singlecontainer {
		display: flex;
		width: 100%;
		position: relative;
    	margin-bottom: 10px;
	}
	
	.hp-stats-legend {
		text-align: left;
		margin-left: 20px
	}
	
	.hp-stats-legend-container{
		padding-top: 0px;
		position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	left: 140px;
	}
	
	.hp-stats-circle {
		margin: 0 
	}
	
	.privacy-underline::after {top: 21px}
	
#hp-jobseeker-sub-nav1::after,
#hp-employer-sub-nav1::after,	
#hp-employer-sub-nav1.hp-employer-class-subnav1::after,
#hp-employer-sub-nav1.hp-employer-class-subnav2::after,
#hp-employer-sub-nav1.hp-employer-class-subnav3::after,
#hp-employer-sub-nav1.hp-employer-class-subnav4::after,
#hp-jobseeker-sub-nav1.hp-jobseeker-class-subnav1::after,
#hp-jobseeker-sub-nav1.hp-jobseeker-class-subnav2::after,
#hp-jobseeker-sub-nav1.hp-jobseeker-class-subnav3::after,
#hp-jobseeker-sub-nav1.hp-jobseeker-class-subnav4::after{	
	display: none
}
	
.hp-section-imagecontainer,	
.hp-section-imagecontainer.hp-medium,
.hp-section-imagecontainer.hp-large,
.hp-section-imagecontainer.hp-Xlarge,
.hp-section-phonecontainer {
	width: 100%;
	margin:auto;
	}
	
	
.hp-section-imagecontainer img {
		display: block; 
		width: 90%; 
		margin: auto;
		margin-top: 15px;
	}	

.hp-phone-frame,
.hp-phone-screenx,
.hp-section-phonecontainer img {
		display: block; 
		width: 90%; 
		margin: auto}
	
.hp-phone-screenx{
		left: 5%
	}	
	
.hp-section-imagecontainer.hp-large img,
	.hp-section-imagecontainer.hp-Xlarge img {
		display: block; 
		width: 94%; 
		margin: auto;
		margin-top: 20px;
		/*transform: translateY(20px)*/
	}			
	
	
	.hp-section-textcontainer {width: 100%}
	.hp-section {margin-bottom: 30px}
	.hp-section-rowcontainer {width:86%}
	.hp-section-paragraph {
		font-size: 18px;
		line-height: 26px
	}
	.hp-section-rowcontainer.hp-flex-reverse {flex-direction: column-reverse}
	
	.hp-footer-linkscontainer{
		flex-direction: column;
		text-align: center
	}
	.hp-footer-column{width: 100%}
	.hp-footer-column-links{line-height: 24px}
	.hp-footer-column-title{margin-top: 20px}
	.hp-footer-logo {
		padding: 0;
		margin: auto;}
	
	.hp-footer {height: 625px}
	.hp-before-footer {padding-bottom: 625px}
	.hp-footer-logo{width: 100%}


	#hp-section-privacy .hp-section-textcontainer.privacy{
	left: 7%;
	color: white;
	position: absolute;
	top: 100px;
	width: 86%
}
	
	#hp-section-privacy {
	margin-bottom: 20px}
	
	.hp-pricing-container {
		flex-direction: column
	}
	
	.hp-pricing-option {
		width: 100%;
		margin-bottom: 20px
	}
	
	.hp-employer-sub-nav-label{
		margin: auto;
		line-height: 20px
	}	
	
	#hp-section-offer .hp-section-textcontainer {
		left: 7%;
    	width: 86%;	
	}
	
}



.mobile-menu {
	display: none;
	width: 100%;
	background-color: white;
	text-align: center;
	padding: 20px 0;
	border-top: 1px solid rgba(0, 14, 45, 0.22);
	border-bottom: 1px solid rgba(0, 14, 45, 0.22);
	position: relative;
	top: 5px
}


@media ( max-width: 1039px) and (min-width:740px) {
.hp-section-phonecontainer,
.hp-section-imagecontainer.hp-Xlarge {
	position: relative;
	width: 58%
	}	
	

.hp-section {
	margin-bottom: 40px	
	}
	
.hp-section-title {
		margin-top: 0
	}	

.hp-section-imagecontainer.hp-marginTop {
		margin-top: 5%			
	}	
	
.hp-section-title.hp-marginTop {
		margin-top: 10%
	}		
}


@media (max-width: 1039px) {

	.hp-section-pricing {
		display: flex;
		flex-direction: column
	}	
	.hp-leftaligned-textcontainer{
	margin-left: 7%;
	width: 86%;
	padding-right: 0px;		
	}
	
	.hp-pricing-container{
	display: flex;
	width: 86%;
	margin: 30px 7% 90px 7%;	
	}	
	
	.hp-leftaligned-title {
	margin: 0 0 10px 0	
	}
}

@media ( max-width: 739px) {
	.hp-leftaligned-title {
	font-size: 24px;
	line-height: 30px;
	}

	.hp-ready{
	flex-direction: column	
	}
	
	.hp-ready-btn{
	margin-left: 0px;
	transform: translateY(0px);
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	margin-top: 20px}

	.hp-ready-btn.hp-OnlyOneBtn {
	width: 100%	
	}
	
	.hp-section-title.hp-center,
	.hp-section-paragraph.hp-center {
	text-align: center
	}	
}	


/*//// SIGN-IN / SIGN-UP ///*/

#hp-SignIn-sliders {
	position: relative; 
	overflow: hidden; 
	width: 100vw; 
	height: calc(100vh - 268px)}


#slider1, #slider2, #slider3, #slider4 {
	position: absolute;
	margin: 0 calc(50vw - 200px);
	opacity: 1;
	-webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}


#slider2.slider-before, #slider3.slider-before, #slider4.slider-before {transform: translateX(calc(50vw + 240px)); opacity: 0}

#slider1.slider-after, #slider2.slider-after, #slider4.slider-after {transform: translateX(calc(-50vw - 240px)); opacity: 0}

.hp-Signin-header{
	margin:0; 
	width: 100vw; 
	height: 30px; 
	position: relative; 
	overflow: hidden;
}



#hp-Signin-logo,
#hp-Signin-logo img {
	position: relative;
    width: 200px;
    display: block;
	margin: 30px auto 30px auto;
	transform: translateX(6px);
    cursor: pointer;	
}


.hp-Signup-title-container {
	position: relative;
	height: 38px;
	margin-bottom: 10px;
	display: flex;
    justify-content: center;
}


#hp-SignIn-Wrapper h1.hp-Signin-title,
#hp-ForgotPassword-Wrapper h1.hp-Signin-title,
#hp-ResetPassword-Wrapper h1.hp-Signin-title,
#hp-SignIn-Wrapper h1.hp-Signup-title {
    font-size: 32px;
    line-height: 38px;
	font-weight: bold;
	color: #25282B;
	position: relative;
	text-align: center;
	margin-bottom: 10px;
	font-family: Roboto, Arial;
}

.hp-Signup-title {
	position: absolute;
	opacity: 1;
}

.hp-Signin-portal-container{
	display: block;
	position: relative;
	text-align: center;
	margin: 0 auto 40px auto;
    height: 26px;
}

.hp-Signin-portal-text{
	display: inline-block;
    font-weight: 500;
    font-size: 14px;
    line-height: 26px;
    text-decoration: none;
    color: white;
	position: absolute;
	text-align: center;
	padding: 0 6px 0 6px;

}

#hp-Signin-js-portal{background-color: #ff1adf}
#hp-Signin-em-portal{background-color: #00ab82}
#hp-Signin-staff-portal{background-color: #011784}


#hp-Signin-js-portal,
#hp-Signin-em-portal,
#hp-Signin-staff-portal{
	transform: translate(-50%,30px);
	opacity: 0;
	z-index: 0;
	-webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

#hp-control.hp-nav1 #hp-Signin-js-portal,
#hp-control.hp-nav2 #hp-Signin-em-portal,
#hp-control.hp-nav3 #hp-Signin-staff-portal{
	transform: translate(-50%,0px);	
	opacity: 1;
	z-index: 5
}


#EdgeID40 {background-color: #0132ea;}
#EdgeID41 {background-color: #ff770c;}
#EdgeID42 {background-color: #000d26;}


#EdgeID40, #EdgeID41, #EdgeID42 {
	position:absolute;
	top:0;
	left:0;
    opacity: 0;
	height: 30px;
	width: 100vw;
	-webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;	
}


#hp-control.hp-nav1 #EdgeID40,
#hp-control.hp-nav2 #EdgeID41,
#hp-control.hp-nav3 #EdgeID42 {
	opacity: 1}

.hp-SignInUp,
.hp-SignIn-btn-container{
	width: 400px;
	margin: auto
}

.hp-radio-row{
	min-height: 36px;
    align-items: center;
	display: flex;
	width: 400px;
	margin: 0 auto 10px auto;
	justify-content: space-between
}

.hp-radio-row.hp-gender {width: 240px}
.hp-radio-row.hp-status {width: 470px; margin-left: -35px}

.hp-radio-container{
	padding-left: 28px;
	cursor:pointer;
	user-select:none;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
}


.hp-radio-container input{
	position: absolute;
    opacity: 0;
    cursor: pointer;
	overflow: visible
}


[type="radio"] {
	box-sizing: border-box;
    padding: 0;
}

.hp-radio-checkmark{
	position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 1px #B2C2CD solid;
    transform: translateY(-1px);
}

.hp-radio-container input:checked ~ .hp-radio-checkmark {
    background-color: #2196F3;
	border: 1px #2196F3 solid;
}

.hp-radio-container:active input ~ .hp-radio-checkmark {
    border: 1px #2196F3 solid;
    box-shadow: 0 0 0 2px #C0D3F0;
}

.hp-radio-container .hp-radio-checkmark:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
	content: "";
    position: absolute;
}


.hp-SignIn-row{
	min-height: 36px;
    position: relative;
    align-items: center;
    margin-bottom: 11px;
}

form input[type="text"],
form input[type="password"]{
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #666;
    background-color: #fff;
    position: relative;
    padding: 0 8px;
    font-size: 15px;
    line-height: 21px;
    font-weight: normal;
    border: 1px solid #B4C2CD;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: text
}

form input[type="text"]:hover{
    background-color: #F8FAFE;
    -webkit-transition: background 0.2s linear;
    -o-transition: background 0.2s linear;
    transition: background 0.2s linear;
}

::placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder { 
  color: #9bb0bf;
  opacity: 1;
  font-style: italic;	
}

.hp-form-input-box{
	width: 400px; 
	height: 40px;
}
	
.hp-show-password-row {
	height: 20px; 
	margin-bottom: 25px;
    display: flex;
	justify-content: space-between;}


.hp-show-password,
.hp-hint-password,
.hp-redirect-text,
.hp-redirect-link,
.hp-error-link,
.hp-authorization-code {
	text-decoration: none;
	font-size: 15px;
	line-height: 20px;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.hp-authorization-code {
	line-height: 22px;
	color: #4d6575
}

.hp-hint-password,
.hp-show-password {
    color: #136acd;
    font-weight: bold;
	cursor: pointer;
}

.hp-hint-password:hover,
.hp-show-password:hover {
	color: #1058aa;
	text-decoration: underline
}

.hp-error-link {
	color: #25282B;
    font-weight: bold;
	cursor: pointer;
	text-decoration: underline;	
}

.hp-signIn-btn{
	font-size: 17px;
    line-height: 21px;
    font-weight: 500;
	width: 100%;
	text-align: center
}

.hp-SignIn-redirect-container{
	text-align: center
}

.hp-redirect-text{color: #4d6575;}

.hp-redirect-link{
	color: #4d6475; 
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;}

.hp-redirect-link:hover,
.hp-error-link:hover {
	color: #1058aa; 
	text-decoration: none	
}

.hp-SignIn-btn-container{
	margin-bottom: 40px}


.hp-text-highlight {
	background-color: yellow;
    padding: 0 3px;
}


#hp-status-employee,
#hp-status-contractor,
#hp-status-transition,
#hp-status-student {margin-bottom: 25px}


/*//// PHOTO / AVATAR ///*/

#BCPhoto {position: relative;
	width: 100px;
    height: 100px;
    display: block;
	margin: 0;}

#BCLogo {
    position: relative;
    width: 360px;
    height: 100px;
    display: block;
    margin: 0 0 20px 0;
}

.hp-BCPhoto-container,
.hp-BCLogo-container {
	width: 400px;
    background-color: #f2f7ff;
    padding: 20px;
    box-sizing: border-box;
    margin: 20px auto 11px auto;
	display: flex;
}

.hp-BCLogo-container {flex-direction: column; align-items: center}

.hp-BCPhotoBtn-container {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
	max-width: 240px;
}

.hp-BCLogoBtn-container {
	width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center	
}

#BCLogoChooseFile {margin-left: calc(50% - 88px)}

.hp-BCPhoto-user-image {
	max-width: 100px;
    max-height: 100px;
    display: block;
	margin: 0;
	position: absolute
}

.hp-BCLogo-image {
    display: block;
	margin: 0;
	position: absolute
}


.hp-btn.hp-upload {
	font-size: 15px;
    line-height: 21px;
    font-weight: 500;
    padding-top: 9px;
    padding-bottom: 7px;
    padding-left: 22px;
    padding-right: 22px;
    display: block;
    width: 95px;
    margin-top: 10px;
}


.avatar-he {
	background: url('/resources/images/professional/dashboard/BlueAvatar100x100He.svg') no-repeat;
    width: 100px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 1;
	transition: all 0.5s linear;
}

.avatar-she {
	background: url("/resources/images/professional/dashboard/BlueAvatar100x100She.svg") no-repeat;
    width: 100px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
	transition: all 0.5s linear;
}


.avatar-they {
	background: url("/resources/images/professional/dashboard/BlueAvatar100x100They.svg") no-repeat;
    width: 100px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
	transition: all 0.5s linear;	
}

.user-photo.background {
	background-color: white;
    width: 100px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
	transition: all 0.3s linear;	
}

#BCPhoto.avatar-green .avatar-he {background: url('/resources/images/professional/dashboard/GreenAvatar100x100He.svg') no-repeat;}
#BCPhoto.avatar-green .avatar-she {background: url('/resources/images/professional/dashboard/GreenAvatar100x100She.svg') no-repeat;}
#BCPhoto.avatar-green .avatar-they {background: url('/resources/images/professional/dashboard/GreenAvatar100x100They.svg') no-repeat;}

.default-logo {
	background: url("/resources/images/professional/dashboard/BlueLogo3600x100.svg") no-repeat;
    width: 360px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 1;
	transition: all 0.3s linear;	
}

.user-logo.background {
	background-color: white;
    width: 360px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
	transition: all 0.4s linear;	
}

#BCLogo.avatar-green .default-logo {background: url('/resources/images/professional/dashboard/GreenLogo3600x100.svg') no-repeat;}

.user-photo {
    max-width: 100px;
    max-height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
	transition: all 0.5s linear;
	background-color: white;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

.user-logo {
	max-width: 360px;
    max-height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
	transition: all 0.5s linear;
	background-color: white;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

/*//// MOBILE SIGN-IN / SIGN-UP ///*/

@media (max-width: 739px){
	#hp-Signin-logo, #hp-Signin-logo img  {width: 180px}
	
	.hp-radio-row {
		flex-direction: column;
		width: 100vw;
		margin: 0 0 20px 0}

	.hp-radio-container,
	.hp-Signin-portal-container 
	{margin-bottom: 15px}
	
	
	.hp-radio-container {width: 100px}
	.hp-radio-row.hp-gender {flex-direction: row; margin: auto} 
	.hp-radio-row.hp-status {flex-direction: row; flex-wrap: wrap; width: 86vw; margin-left: 7vw}
	.hp-radio-row.hp-gender .hp-radio-container {width: 35px}	
	.hp-radio-row.hp-status .hp-radio-container {width: calc(43vw - 28px)}	
	#slider2 #BCPhotoChooseFile {text-overflow: clip; width: 177px}
	#slider2 .hp-redirect-text {text-align: center}
	#slider4 #BCLogoChooseFile {
		margin-left: calc(43vw - 88px);
    	margin-right: calc(43vw - 165px);}
	

	
	.hp-BCPhoto-container, .hp-BCLogo-container {width: 86vw}
	
	#hp-GenderNamePhoto .hp-redirect-text {margin: auto}
	
	.hp-form-input-box{
		width: 86vw;
		display: block;
		margin: auto
	}
	
	form input[type="text"]{margin: auto}
	
	.hp-SignInUp, .hp-SignIn-btn-container {width: 100vw}
	
	.hp-signIn-btn {
		display: block;
		width: 86%;
		margin: auto
	}
	
	.hp-show-password-row {
		width: 86vw;
		margin: 0 auto 25px auto
	}
	
	.hp-Signin-title,
	.hp-Signup-title {
		font-size: 26px;}
	
}

@media (max-width: 389px){
	.hp-hide-390px{
		display: none
	}}

@media (max-width: 739px){
	#hp-SignIn-sliders {height: calc(100vh - 236px)}
	#slider1, #slider2, #slider3, #slider4 {margin: 10px 0 0 0}
	#slider2.slider-before, #slider3.slider-before, #slider4.slider-before {transform: translateX(100vw); opacity: 0}
	#slider1.slider-after, #slider2.slider-after {transform: translateX(-100vw); opacity: 0}
	.hp-BCPhoto-container {flex-direction: column; align-items: center}
	#BCPhoto {margin-bottom: 20px}
	.hp-BCPhotoBtn-container {margin-left: 0; align-items: center}
}

/*/// SIGN-IN / SIGN-UP ERROR MESSAGES ///*/

form.hp-SignInUp span.error,
#blog-subscribe span.error {
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 15px;
    line-height: 30px;
    color: #25282B;
    text-align: left;
    height: 30px;
    align-items: center;
    background-color: white;
    border-radius: 6px;
    border: solid 1px #808080;
    padding: 5px 4px 5px 40px;
    position: absolute;
    z-index: 1;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
    background: #fff url('/resources/images/professional/dashboard/Icon_Warning.svg') no-repeat 5px 4px;
    background-size: 30px;
}

form.hp-SignInUp .query-type-container span.error {width: 128px;}
form.hp-SignInUp .hp-SignInUp-email span.error {width: 236px;}
form.hp-SignInUp.hp-articleInput span.error {width: 130px;}

#blog-subscribe span.error {width: 236px;}
form.hp-SignInUp .hp-SignInUp-pswd span.error {width: 194px;}
form.hp-SignInUp .hp-SignUp-first span.error {width: 194px;}
form.hp-SignInUp .hp-SignUp-last  span.error {width: 194px;}
form.hp-SignInUp .hp-SignUp-class-company  span.error {width: 194px;}
form.hp-SignInUp .hp-SignUp-class-title  span.error {width: 180px;}
form.hp-SignInUp .hp-SignUp-class-clientCompany  span.error {width: 232px;}
form.hp-SignInUp .hp-SignUp-class-targetTitle  span.error {width: 194px;}
form.hp-SignInUp .hp-SignUp-class-code  span.error {width: 224px;}
form.hp-SignInUp .hp-SignUp-class-school  span.error {width: 175px;}
form.hp-SignInUp .hp-SignUp-class-degree  span.error {width: 180px;}
form.hp-SignInUp .hp-SignUp-class-field  span.error {width: 220px;}



form.hp-SignInUp span.error:before,
#blog-subscribe span.error:before {
    content: '';
    display: block;  
    position: absolute;
    left: 20px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: black;
}

form.hp-SignInUp span.error:after,
#blog-subscribe span.error:after {
    content: '';
    display: block;  
    position: absolute;
    left: 21px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: white;
}

.hp-error-text{
  font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 30px;	
  color: #25282B;
  text-align: left;	
}

.hp-error-sign {width:30px; margin-right: 4px}

#hp-SignIn-wrongpswd0 {display: none}
body.wrongpswd #hp-SignIn-wrongpswd0 {display: block}

#hp-SignIn-sessionexpired0 {display: none}
body.sessionexpired #hp-SignIn-sessionexpired0 {display: block}

#hp-wrongpswd {display: none}
#hp-wrongpswd.show {display: block}

#hp-emailFound {display: none}
#hp-emailFound.show {display: block}

.hp-SignIn-error-box {
	display: block;
    width: 400px;
    margin: auto;
	color: #25282B;
	background-color: #fff8f8;
	border: 1px solid #ff9a9a;
    box-sizing: border-box;
    border-radius: 4px;	
	padding: 15px
}

.hp-SignIn-error-box,
.hp-reset-text{
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 15px;
	margin-bottom: 11px;
	line-height: 24px
}

.hp-reset-text {
	display: block;
    width: 400px;
    margin: 0 auto 11px auto;
	color: #25282B;
    box-sizing: border-box;
}

.hp-Signin-error-title{
	color:#fa2c2d;
	display: flex;
	line-height: 30px;
	margin-bottom: 10px;
	font-weight: 500;
    font-size: 16px;
}

.hp-Signin-error-text {
	margin-bottom: 10px
}


@media (max-width: 739px) {
.hp-SignIn-error-box,
.hp-reset-text {width: 86vw}
	}

#hp-authorization-container.wrongcode {	
 background-color: #fff8f8;
}

#hp-authorization-container.wrongcode .hp-authorization-code {
 color: #ff0000;
}

#hp-authorization-container.wrongcode.active {	
	animation-name: es-error-blink-bckg;
  	animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes es-error-blink-bckg {
    0% {background-color: #fff8f8}
    50% {background-color: #ffe0e0}
    100% {background-color: #fff8f8}
    }
    
    
/*/// SUB-NAVIGATION ANIMATION ///*/

#hp-sub-nav-js {background-image: linear-gradient(25deg, #142fc0 , #001b88)}
#hp-sub-nav-em {background-image:linear-gradient(60deg, #000522, #000e56)}

.subnav-laycontainer {
	width: 19%;
	height: 101%;
	position: absolute;
}

.subnav-lay1,
.subnav-lay2,
.subnav-lay3,
.subnav-lay4 {
	position: absolute;
    height: 100%;
    width: 100%;
}


.subnav-lay1 {clip-path: polygon(0% 0%, 82% 0%, 84% 100%, 0% 100%)}
.subnav-lay2 {clip-path: polygon(0% 0%, 70% 0%, 65% 100%, 0% 100%)}
.subnav-lay3 {clip-path: polygon(0% 0%, 31% 0%, 35% 100%, 0% 100%)}
.subnav-lay4 {clip-path: polygon(0% 0%, 8% 0%, 13% 100%, 0% 100%)}


.subnav-lay1 {z-index: 1; animation: subnav-lay1 10s infinite; animation-timing-function: linear}
.subnav-lay2 {z-index: 2; animation: subnav-lay2 10s infinite; animation-timing-function: linear}
.subnav-lay3 {z-index: 3; animation: subnav-lay3 10s infinite; animation-timing-function: linear}
.subnav-lay4 {z-index: 4; animation: subnav-lay4 10s infinite; animation-timing-function: linear}


#subnav-pink1 {background-color: #FF19E0}
#subnav-pink2 {background-color: #FF7AEC}
#subnav-pink3 {background-color: #FFDDFA}
#subnav-pink4 {background-color: #FF7AEC}



#subnav-pink1 {transition: all 0.8s ease-in-out;}
#subnav-pink2 {transition: all 0.8s ease-in-out;}
#subnav-pink3 {transition: all 0.8s ease-in-out;}
#subnav-pink4 {transition: all 0.8s ease-in-out;}
#subnav-orange1 {transition: all 0.8s ease-in-out;}
#subnav-orange2 {transition: all 0.8s ease-in-out;}
#subnav-orange3 {transition: all 0.8s ease-in-out;}
#subnav-orange4 {transition: all 0.8s ease-in-out;}


@keyframes subnav-lay1 {
    0% {clip-path: polygon(0% 0%, 82% 0%, 84% 100%, 0% 100%)}
    10% {clip-path: polygon(0% 0%, 83% 0%, 91% 100%, 0% 100%)}
    20% {clip-path: polygon(0% 0%, 89% 0%, 84% 100%, 0% 100%)}
    30% {clip-path: polygon(0% 0%, 83% 0%, 88% 100%, 0% 100%)}
    40% {clip-path: polygon(0% 0%, 81% 0%, 89% 100%, 0% 100%)}
    50% {clip-path: polygon(0% 0%, 93% 0%, 90% 100%, 0% 100%)}
    60% {clip-path: polygon(0% 0%, 85% 0%, 92% 100%, 0% 100%)}
    70% {clip-path: polygon(0% 0%, 81% 0%, 86% 100%, 0% 100%)}
    80% {clip-path: polygon(0% 0%, 80% 0%, 90% 100%, 0% 100%)}
    90% {clip-path: polygon(0% 0%, 85% 0%, 88% 100%, 0% 100%)}
    100% {clip-path: polygon(0% 0%, 82% 0%, 84% 100%, 0% 100%)}
}

@keyframes subnav-lay2 {
    0% {clip-path: polygon(0% 0%, 70% 0%, 65% 100%, 0% 100%)}
    10% {clip-path: polygon(0% 0%, 67% 0%, 66% 100%, 0% 100%)}
    20% {clip-path: polygon(0% 0%, 71% 0%, 67% 100%, 0% 100%)}
    30% {clip-path: polygon(0% 0%, 65% 0%, 62% 100%, 0% 100%)}
    40% {clip-path: polygon(0% 0%, 64% 0%, 63% 100%, 0% 100%)}
    50% {clip-path: polygon(0% 0%, 70% 0%, 65% 100%, 0% 100%)}
    60% {clip-path: polygon(0% 0%, 67% 0%, 66% 100%, 0% 100%)}
    70% {clip-path: polygon(0% 0%, 64% 0%, 63% 100%, 0% 100%)}
    80% {clip-path: polygon(0% 0%, 65% 0%, 66% 100%, 0% 100%)}
    90% {clip-path: polygon(0% 0%, 63% 0%, 62% 100%, 0% 100%)}
    100% {clip-path: polygon(0% 0%, 70% 0%, 65% 100%, 0% 100%)}
}

@keyframes subnav-lay3 {
    0% {clip-path: polygon(0% 0%, 31% 0%, 35% 100%, 0% 100%)}
    10% {clip-path: polygon(0% 0%, 30% 0%, 37% 100%, 0% 100%)}
    20% {clip-path: polygon(0% 0%, 34% 0%, 39% 100%, 0% 100%)}
    30% {clip-path: polygon(0% 0%, 26% 0%, 31% 100%, 0% 100%)}
    40% {clip-path: polygon(0% 0%, 30% 0%, 38% 100%, 0% 100%)}
    50% {clip-path: polygon(0% 0%, 33% 0%, 40% 100%, 0% 100%)}
    60% {clip-path: polygon(0% 0%, 29% 0%, 35% 100%, 0% 100%)}
    70% {clip-path: polygon(0% 0%, 34% 0%, 46% 100%, 0% 100%)}
    80% {clip-path: polygon(0% 0%, 32% 0%, 41% 100%, 0% 100%)}
    90% {clip-path: polygon(0% 0%, 34% 0%, 39% 100%, 0% 100%)}
    100% {clip-path: polygon(0% 0%, 31% 0%, 35% 100%, 0% 100%)}
}

@keyframes subnav-lay4 {
    0% {clip-path: polygon(0% 0%, 8% 0%, 13% 100%, 0% 100%)}
    10% {clip-path: polygon(0% 0%, 12% 0%, 17% 100%, 0% 100%)}
    20% {clip-path: polygon(0% 0%, 14% 0%, 17% 100%, 0% 100%)}
    30% {clip-path: polygon(0% 0%, 7% 0%, 10% 100%, 0% 100%)}
    40% {clip-path: polygon(0% 0%, 9% 0%, 14% 100%, 0% 100%)}
    50% {clip-path: polygon(0% 0%, 13% 0%, 18% 100%, 0% 100%)}
    60% {clip-path: polygon(0% 0%, 8% 0%, 11% 100%, 0% 100%)}
    70% {clip-path: polygon(0% 0%, 13% 0%, 19% 100%, 0% 100%)}
    80% {clip-path: polygon(0% 0%, 15% 0%, 20% 100%, 0% 100%)}
    90% {clip-path: polygon(0% 0%, 12% 0%, 17% 100%, 0% 100%)}
    100% {clip-path: polygon(0% 0%, 8% 0%, 13% 100%, 0% 100%)}
}

@media ( max-width: 739px) {
	.subnav-laycontainer {width: 36%}
	#subnav-pink4 {display: none}
	#subnav-orange4 {display: none}
	.hp-em-layer {transform: scaleX(1.6)}
#hp-backgrd-Signin-em .hp-em-layer {transform: scale(3) translateX(-20%)}	
}


/*/// ERROR ///*/
.hp-dogerror-text {
	font-family: Roboto;
    font-size: 21px;
    line-height: 26px;
    font-weight: normal;
    color: #718fa2;
    position: relative;
    text-align: center;
    width: 800px;
    max-width: 80%;
    margin: 0 auto 20px auto;
}

.hp-dogerror-img {
	max-width: 400px;
	margin: auto;
	width: 80%;
	display: block;
}

@media ( max-width: 739px) {
	.hp-dogerror-text {
	font-family: Roboto;
    font-size: 16px;
    line-height: 21px;
    width: 90%;
    max-width: 90%;}
}

/*/// MOVING LOADER ///*/
#hp-ForgotPassword-Wrapper,
#hp-ResetPassword-Wrapper {
	position: relative
}

.path-loader {
	position: absolute;
	top: 350px;
	display: none;
	width: 100%
}

#hp-ResetPassword-Wrapper .path-loader {top: 410px;}
#hp-SignIn-Wrapper .path-loader {top: 550px;}
#hp-SignIn-Wrapper .path-loader.path-Signup {top: 525px;}
.hp-nav2 #hp-SignIn-Wrapper .path-loader.path-Signup {top: 410px;}
.hp-nav3 #hp-SignIn-Wrapper .path-loader.path-Signup {top: 410px;}


.path-loader.show {
	display: block
}

.path {
  stroke-dasharray: 2200;
  stroke-dashoffset: 2000;
  animation: dash 10s linear infinite;
  opacity: 0;
  fill: none;
  stroke-width: 2
}

@media (max-width: 739px){
.path {stroke-width: 8}

.path-loader {top: 400px;}
#hp-ResetPassword-Wrapper .path-loader {top: 470px;}
#hp-SignIn-Wrapper .path-loader {top: 555px;}
#hp-SignIn-Wrapper .path-loader.path-Signup {top: 530px;}
.hp-nav2 #hp-SignIn-Wrapper .path-loader.path-Signup {top: 410px;}
.hp-nav3 #hp-SignIn-Wrapper .path-loader.path-Signup {top: 410px;}
}
	
.path.path1 {
	stroke: #0757d6;
	animation-delay: 0s
}

.path.path2 {
	stroke: #00387c;
	animation-delay: 1.4s
}

.path.path3 {
	stroke: #0081ff;
	animation-delay: 2.8s
}

.hp-nav1 .path.path1 {stroke: #002ac1}
.hp-nav1 .path.path2 {stroke: #014dff}
.hp-nav1 .path.path3 {stroke: #ff1adf}

.hp-nav2 .path.path1 {stroke: #122f85}
.hp-nav2 .path.path2 {stroke: #1b46b3}
.hp-nav2 .path.path3 {stroke: #00ab82}

.hp-nav3 .path.path1 {stroke: #122f85}
.hp-nav3 .path.path2 {stroke: #1b46b3}
.hp-nav3 .path.path3 {stroke: #ff1adf}




@keyframes dash {
    0% {opacity: 0; stroke-dashoffset: 2000;}
	10% {opacity: 1; stroke-dashoffset: 1600;}	
    100% {opacity: 1; stroke-dashoffset: -2000;}
}


/*/// REPORT SAMPLE ///*/

.report-scale {
	position: absolute;
	top: calc(27% + 55px);
    right: 3%;
    transform: rotate(5deg);
    width: 816px;
    height: 1057px;
    transform-origin: top right;
    z-index: 5;
	opacity: 0;
	box-shadow: 5px 1px 8px #0000007a;
	overflow: hidden;
	background-color: white
}

.report-scale.hp-report-show {
	opacity: 1;
}

.report-scale.hp-report-animate {
	animation: intro-slide-animation 1s ease forwards;
	animation-delay: 0.8s;
}

@keyframes intro-slide-animation {
	0% {margin-top: 12vh; opacity: 0}
	100% {margin-top: 10; opacity: 1}
}


.hp-photo {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 162px;
	left: 48px
}


/*/// iframe background //*/
.hp-report-page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	background-color: white;
	transition: 0.4s linear; 
}


.hp-report-page.next,
.hp-report-page.nextnext {
	opacity: 0;
	z-index: 6
}

#hp-control.hp-nav1 .js-report-emp {display: none}
#hp-control.hp-nav2 .js-report-js {display: none}
#hp-control.hp-nav3 .js-report-js {display: none}


.hp-report-page.selected {
  opacity: 1;
  clip-path: polygon(0 0, calc(100% - 180px) 0%, 100% 128px, 100% 100%, 0% 100%);
  transition: 0.4s clip-path linear; 
  z-index: 10
}


.hp-report-page.selected.pulled  {
  clip-path: polygon(0 0, calc(100% - 282px) 0%, 100% 175px, 100% 100%, 0% 100%);
  transition: 0.4s all linear; 
}



.hp-paper-sheet-corner,
.hp-paper-mouseover {
	content: '';
    height: 175px;
    width: 130px;
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    border-bottom-left-radius: 5px;
    transition: 0.5s all linear;
    z-index: 11
}




.hp-paper-sheet-corner {
	transform: translatex(-49px);
    background: linear-gradient(to left bottom, transparent 50%, #f2f9ff 10%, #FFFFFF, #eaedf1 100%);
    box-shadow: 0 6px 4px -4px #8f8f8f;
    z-index: 12
}

.hp-paper-mouseover {
	background: none;
	background-color: transparent;
	transform: translate(0px, 0px) rotate(-19deg);	
	transform-origin: top left;
	width: 180px;
	cursor: pointer
}

.hp-paper-mouseover:hover {
	transform: translate(-16px, 12px) rotate(-19deg);
    width: 300px;
    height: 250px;
    transition: 0.5s all linear;
}


.hp-paper-mouseover:hover .hp-paper-sheet-corner {
    width: 210px;
    height: 250px;
    transition: 0.5s all linear;
}

.hp-paper-arrow {
    height: 20px;
    width: 85px;
    position: absolute;
    top: 0px;
    right: 0px;
    display: inline-block;
    z-index: 11;
    text-align: center;
}

.hp-paper-arrow.hp-arrow-text2 {
    height: 20px;
    width: 180px;
}

.hp-paper-arrow.hp-arrow-text1 {
	transform: rotate(35deg);
    margin: 44px 19px 0 0;
    transition: 0.5s opacity linear;
    transition-delay: 0.5s; 
}

.hp-paper-arrow.hp-arrow-text2 {
    transform: rotate(32deg);
    margin: 60px 0px 0 0;
    margin: 72px 22px 0 0;
    margin: 66px 16px 0 0;
    opacity: 0;
    transition: 0.5s opacity linear; 
    z-index: 11;   
    cursor: pointer
}

.hp-paper-arrow.hp-arrow-text1.pulled {
	opacity: 0;
    transition: 0.5s opacity linear;
}

.hp-paper-arrow.hp-arrow-text2.pulled {
	opacity: 1;
    transition: 0.5s opacity linear;
 	transition-delay: 0.5s;
}



.hp-paper-arrow-text {
    font-size: 13px;
    font-family: Roboto, Arial;
    text-align: left;
    font-weight: 500;
    color: #0026ad;
    position: relative;
    -webkit-font-smoothing: antialiased;
}


.hp-paper-arrow-text::after {	
    width: 16px;
    height: 6px;
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    background-color: #0026ad;
}

/*
.hp-paper-arrow-text.hp-arrow-text2 ::after {	
	width: 8px;
    height: 13px;
    content: "";
    display: block;
    position: absolute;
    right: -16px;
    top: 0px;
    transform: translateX(-50%);
    clip-path: polygon(0 50%, 100% 0%, 100% 100%);
    background-color: #0026ad;
}

.hp-paper-arrow-text.hp-arrow-text2 ::before {	
	width: 8px;
    height: 13px;
    content: "";
    display: block;
    position: absolute;
    left: -8px;
    top: 0px;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 50%, 0% 100%);
    background-color: #0026ad;
}*/

.hp-paper-corner {
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0; 
    z-index: 11;
    background-color: white;
    clip-path: polygon(100% 0%, calc(100% - 184px) 0%, 100% 132px, 100% 0%);   
    transition: 0.5s all linear;
}

.hp-paper-corner.pulled {
  	clip-path: polygon(100% 0%, calc(100% - 286px) 0%, 100% 179px, 100% 0%);	
/*	animation: corner-animation 1s infinite;*/
}

/*
@keyframes corner-animation {
	0% {background-color: white;}
	50% {background-color: #f2fffe;}
	100% {background-color: white;}
}
*/


@media ( max-width: 900px) and (min-width:740px) {
.report-scale {
	display: none
}}


@media (max-width: 739px) {
.report-scale {
	right: 5%;
	top: calc(10% + 348px);
	z-index: 400
}

#hp-control.hp-nav2 #report-scale-all,
#hp-control.hp-nav3 #report-scale-all {
	display: none
}

.hp-landing-msg-bullet::before {
	display: none
}


#hp-landing-msg-js {
	top: calc(10% + 80px);
	transform: none
}

#hp-backgrd-js {
	overflow: visible
}

}

/*/// CONTINUE TO ARTICLE ///*/
#hp-article-btn {
	background-color: #ffd75f;	
	display: block;
	width: 100%;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 20px;
    margin-top: 0px;
    color: #212529;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    padding: 30px 0px
}

#hp-article-btn:hover,
#hp-article-btn:active  {
	background-color: #ffc108;
}

#hp-article-btn:active  {	
		background-color: #ffaf38;
}