@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900');

:root {
	--green:#b8aec8; /*purple*/
}

*:focus {
	outline: none;
}

html, body {
	min-height: 100%;
	width: 100%;
	/* overflow: hidden; */
}

.text-justified {
	text-align:justify;
}
.text-left {
	text-align:left;
}
.text-right {
	text-align:right;
}
.text-center {
	text-align:center;
}

.flex {
	display: flex;
}

.align-all-center {
	flex: 1;
  	align-items: center;
  	justify-content: center;
}

/*404 Robot*/
.st0{fill:none;}
	.st1{fill:none;stroke:#231F20;stroke-width:0.3;stroke-linecap:square;stroke-linejoin:bevel;}
	.st2{fill:url(#SVGID_1_);stroke:#E0E1E2;stroke-width:0.5;stroke-miterlimit:10;}
	.st3{fill:url(#SVGID_2_);stroke:#E0E1E2;stroke-width:0.5;stroke-miterlimit:10;}
	.st4{fill:url(#SVGID_3_);stroke:#E0E1E2;stroke-width:0.5;stroke-miterlimit:10;}
	.st5{opacity:0.7;fill:url(#SVGID_4_);}
	.st6{opacity:0.7;fill:url(#SVGID_5_);}
	.st7{opacity:0.7;fill:url(#SVGID_6_);}
	.st8{opacity:0.7;fill:url(#SVGID_7_);}
	.st9{fill:#333333;stroke:#4E4E4E;stroke-width:0.5;stroke-miterlimit:10;}
	.st10{fill:url(#SVGID_8_);}
	.st11{fill:#E6E6E5;}
	.st12{opacity:0.3;fill:url(#SVGID_9_);}
	.st13{fill:url(#SVGID_10_);}
	.st14{opacity:0.5;fill:url(#SVGID_11_);}
	.st15{fill:#5EBB47;}
	.st16{fill:#676767;}
	.st17{opacity:0.2;fill:url(#SVGID_12_);}
	.st18{opacity:0.2;fill:url(#SVGID_13_);}
	.st19{fill:#8DC641;}
	.st20{fill:none;stroke:#8DC641;stroke-width:0.25;stroke-miterlimit:10;}
	.st21{opacity:0.2;fill:url(#SVGID_14_);}
	.st22{opacity:0.2;fill:url(#SVGID_15_);}
	.st23{opacity:0.2;fill:url(#SVGID_16_);}
	.st24{opacity:0.3;fill:url(#SVGID_17_);}
	.st25{opacity:0.7;fill:url(#SVGID_18_);}
	.st26{opacity:0.3;fill:url(#SVGID_19_);}
	.st27{opacity:0.2;fill:url(#SVGID_20_);}
	.st28{fill:url(#SVGID_21_);}
	.st29{opacity:0.3;fill:url(#SVGID_22_);}
	.st30{opacity:0.2;fill:url(#SVGID_23_);}
	.st31{fill:url(#SVGID_24_);}
	.st32{fill:url(#SVGID_25_);}
	.st33{fill:none;stroke:#E0E1E2;stroke-width:0.5;stroke-miterlimit:10;}
	.st34{opacity:0.3;fill:url(#SVGID_26_);}
	.st35{opacity:0.2;fill:url(#SVGID_27_);}
	.st36{fill:url(#SVGID_28_);}
	.st37{fill:url(#SVGID_29_);}
	.st38{opacity:0.2;fill:url(#SVGID_30_);}
	.st39{opacity:0.8;fill:url(#SVGID_31_);}
	.st40{opacity:0.2;fill:url(#SVGID_32_);}
	.st41{opacity:0.2;fill:url(#SVGID_33_);}
	.st42{opacity:0.2;fill:url(#SVGID_34_);}
	.st43{opacity:0.2;fill:url(#SVGID_35_);}
	.st44{opacity:0.3;fill:url(#SVGID_36_);}
	.st45{opacity:0.2;fill:url(#SVGID_37_);}
	.st46{fill:url(#SVGID_38_);}
	.st47{opacity:0.2;fill:url(#SVGID_39_);}
	.st48{opacity:0.3;fill:url(#SVGID_40_);}
	.st49{opacity:0.7;fill:url(#SVGID_41_);}
	.st50{opacity:0.3;fill:url(#SVGID_42_);}
	.st51{opacity:0.2;fill:url(#SVGID_43_);}
	.st52{fill:url(#SVGID_44_);}
	.st53{opacity:0.3;fill:url(#SVGID_45_);}
	.st54{opacity:0.2;fill:url(#SVGID_46_);}
	.st55{fill:url(#SVGID_47_);}
	.st56{fill:url(#SVGID_48_);}
	.st57{opacity:0.2;fill:url(#SVGID_49_);}
	.st58{opacity:0.8;fill:url(#SVGID_50_);}
	.st59{fill:#CCCCCC;}
	.st60{opacity:0.5;fill:url(#SVGID_51_);}
	.st61{fill:#8DC641;stroke:#8DC641;stroke-width:0.25;stroke-miterlimit:10;}
	.st62{opacity:0.5;fill:#FFFFFF;}
	.st63{fill:url(#SVGID_52_);fill-opacity:0.2;}
	.st64{opacity:0.5;fill:url(#SVGID_53_);}
	.st65{fill:url(#SVGID_54_);fill-opacity:0.2;}
	.st66{fill:url(#SVGID_55_);stroke:#E0E1E2;stroke-width:0.5;stroke-miterlimit:10;}
	.st67{fill:none;stroke:#4E4E4E;stroke-width:0.5;stroke-miterlimit:10;}
	.st68{fill:#333333;}
	.st69{opacity:0.5;fill:url(#SVGID_56_);}
	.st70{fill:url(#SVGID_57_);}
	.st71{opacity:0.2;fill:none;stroke:#010101;stroke-width:6.8852;stroke-miterlimit:10;}
	.st72{opacity:0.7;fill:url(#SVGID_58_);}
	.st73{opacity:0.7;fill:url(#SVGID_59_);}
	.st74{opacity:0.7;fill:url(#SVGID_60_);}
	.st75{opacity:0.7;fill:url(#SVGID_61_);}
	.st76{fill:url(#SVGID_62_);}

.animate-down {
	animation-name: slideDown;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.animate-blink {
	animation-name: eyeBlink;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes slideDown {
    0%   {opacity: 0; top: -40px}
    100% {opacity: 1; top: 0px}
}

@keyframes eyeBlink {
    0%   {opacity: 0;}
    20%   {opacity: 1;}
    30%   {opacity: 0;}
    40% {opacity: 1;}
    50%   {opacity: 0;}
    60%   {opacity: 1;}
    70%   {opacity: 0;}
    80% {opacity: 1;}
}
.space-10 {
	margin-top: 10px
}
.space-20 {
	margin-top: 20px
}
.space-30 {
	margin-top: 30px
}

.message-404 {
	padding:10px;
	text-align: center;
}

.message-404 h1 {
	font-size: 15em;
	margin:0;
	color: #c82a2a;
	font-weight: 700;
	font-family: 'Source Sans Pro', sans-serif;

text-shadow: -5px 5px 0px #de4747,
                 -10px 10px 0px #ff6f8a,
                 -15px 15px 0px #fd8989;
}

/*.message-404 h1:after {
	position: absolute;
    content:'404';
     outline: 1px solid red;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: scaleY(0.5) rotateX(-15deg);
  transform-origin: 50% 100%;
  opacity: .3;
}*/

.message-404 h3 {
	font-size: 2em;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 600;color: #666;
	margin:0;
}

.message-404 p {
	font-size: 1.2em;
	letter-spacing: 1px;
	line-height: 1.6em;
}


/*LOGOUT PAGE*/ 

.bg-logout {
	background:url(../images/logout-bg-2.jpg);
	background-size: cover;
}

.logout-content {
	margin-top: 100px;
	margin-bottom: 100px;
	text-align: center;
	padding:20px;
	background:rgba(255,255,255,0.7);
}

.logout-content h3 {
	color: #343344;
	font-size: 1.3em;
}

.logout-content h2 {
	color: var(--green);
	font-size: 2em;
}

.action-content {
	text-align: left;
	margin-top: 30px;
	padding:10px;
	max-height: 395px;
	overflow-y:scroll; 
}

.action-content::-webkit-scrollbar-track
{
	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
	background: rgba(255,255,255,0.1);
}

.action-content::-webkit-scrollbar
{
	width: 5px;
	background-color: #F5F5F5;
	background: rgba(255,255,255,0.35);
}

.action-content::-webkit-scrollbar-thumb
{
	background: var(--green);
	/*border: 2px solid #555555;*/
}

.action-content ul {
	padding:0;
}

.action-content ul li {
	display: block;
	padding: 25px 20px;
	background:#fff;
	margin:5px 0;
}

.bg-register {
	/*background-image: linear-gradient(#c2e59c, #64b3f4);*/
	background:url(../images/referral-img.jpg) center center;
	background-size: cover;
	background-repeat: no-repeat;
}

body.bg-register {
	overflow: auto;
}

.w3lsg-bubbles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
}
.w3lsg-bubbles li {
	position: absolute;
	list-style: none;
	display: block;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.15);
	bottom: -160px;
	-webkit-animation: square 20s infinite;
	-moz-animation: square 250s infinite;
	-o-animation: square 20s infinite;
	-ms-animation: square 20s infinite;
	animation: square 20s infinite;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	transition-timing-function: linear; 
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.w3lsg-bubbles li:nth-child(1) {
	left: 10%;
}
.w3lsg-bubbles li:nth-child(2) {
	left: 20%;
	width: 80px;
	height: 80px;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-o-animation-delay: 2s;
	-ms-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 17s;
	-moz-animation-duration: 17s;
	-o-animation-duration: 17s;
	animation-duration: 17s;
}
.w3lsg-bubbles li:nth-child(3) {
	left: 25%;
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-o-animation-delay: 4s;
	-ms-animation-delay: 4s;
	animation-delay: 4s;
}
.w3lsg-bubbles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	-webkit-animation-duration: 22s;
	-moz-animation-duration: 22s;
	-o-animation-duration: 22s;
	-ms-animation-duration: 22s;
	animation-duration: 22s;
	background-color: rgba(255, 255, 255, 0.25);
}
.w3lsg-bubbles li:nth-child(5) {
	left: 70%;
}
.w3lsg-bubbles li:nth-child(6) {
	left: 80%;
	width: 120px;
	height: 120px;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-o-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
	background-color: rgba(255, 255, 255, 0.2);
}
.w3lsg-bubbles li:nth-child(7) {
	left: 32%;
	width: 160px;
	height: 160px;
	-webkit-animation-delay: 7s;
	-moz-animation-delay: 7s;
	-o-animation-delay: 7s;
	-ms-animation-delay: 7s;
	animation-delay: 7s;
}
.w3lsg-bubbles li:nth-child(8) {
	left: 55%;
	width: 20px;
	height: 20px;
	-webkit-animation-delay: 15s;
	-moz-animation-delay: 15s; 
	animation-delay: 15s;
	-webkit-animation-duration: 40s;
	-moz-animation-duration: 40s;
	animation-duration: 40s;
}
.w3lsg-bubbles li:nth-child(9) {
	left: 25%;
	width: 10px;
	height: 10px;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 40s;
	animation-duration: 40s;
	background-color: rgba(255, 255, 255, 0.3);
}
.w3lsg-bubbles li:nth-child(10) {
	left: 90%;
	width: 160px;
	height: 160px;
	-webkit-animation-delay: 11s;
	animation-delay: 11s;
}
@-webkit-keyframes square {
	0% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-800px) rotate(600deg);
		-moz-transform: translateY(-800px) rotate(600deg); 
		-o-transform: translateY(-800px) rotate(600deg); 
		-ms-transform: translateY(-800px) rotate(600deg); 
		transform: translateY(-800px) rotate(600deg);        
	}
}
@keyframes square {
	0% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0); 
		-o-transform: translateY(0); 
		-ms-transform: translateY(0);
		transform: translateY(0);        
	}
	100% {
		-webkit-transform: translateY(-800px) rotate(600deg);
		-moz-transform: translateY(-800px) rotate(600deg);
		-o-transform: translateY(-800px) rotate(600deg); 
		-ms-transform: translateY(-800px) rotate(600deg);
		transform: translateY(-800px) rotate(600deg);        
	}
}

.form-content {
	padding:30px 50px;
	background:rgba(255,255,255,0.9);
	margin: 50px 0;
	position: relative;
	z-index: 299
}
.form-content .heading {
	border-bottom:1px solid #ccc;
	margin-bottom: 30px;
}

.form-content input, .form-content select {
	background:transparent;
	padding:15px 10px;
	box-shadow: none;
}
.form-content input:focus, .form-content select:focus {
	background:#fff;
	box-shadow: none;
	border-color: var(--green)
}

.heading h2 {
	font-size: 3em;
	font-weight: 300;
	margin-bottom: 20px;
}


.btn-primary {
	background: #c41439;
	padding:10px 20px;
	border-color: #c41439;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
	background: #9b1431;
	border-color: #9b1431;
}

.btn-reset {
	color: #333;
}
.page {
	padding:40px 0;
}

.fp-logo {
	margin:0 auto;
	width: 300px;
}
.forgetpassword, .session-expired {
	background:#fff;
	padding:30px;
	margin-top: 40px;
	border:1px solid #ddd;
}

.session-expired {
	margin-top: 0;
}

.pass_show{position: relative} 

.pass_show .ptxt { 

position: absolute; 

top: 50%; 

right: 10px; 

z-index: 1; 

color: #f36c01; 

margin-top: -10px; 

cursor: pointer; 

transition: .3s ease all; 

} 

.pass_show .ptxt:hover{color: #333333;} 

.hourglassBackground {
  position: relative;
  background: linear-gradient(#6c7ffc,#27ccfc);
  height: 130px;
  width: 130px;
  border-radius: 50%;
  margin: 30px auto;
}

.hourglassContainer {
  position: absolute;
  top: 30px;
  left: 40px;
  width: 50px;
  height: 70px;
  -webkit-animation: hourglassRotate 2s ease-in 0s infinite;
          animation: hourglassRotate 2s ease-in 0s infinite;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.hourglassContainer div,
.hourglassContainer div:before,
.hourglassContainer div:after {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

@-webkit-keyframes hourglassRotate {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
}

@keyframes hourglassRotate {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
}
[class^="hourglassCap"] {
  position: absolute;
  left: 0;
  height: 5px;
  width: 50px;
  background-color: white;
}
[class^="hourglassCap"]:before, [class^="hourglassCap"]:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  background-color: white;
}

.hourglassCapTop {
  top: 0;
}
.hourglassCapTop:before {
  top: -25px;
}
.hourglassCapTop:after {
  top: -20px;
}

.hourglassCapBottom {
  bottom: 0;
}
.hourglassCapBottom:before {
  bottom: -25px;
}
.hourglassCapBottom:after {
  bottom: -20px;
}

.hourglassGlassTop {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  position: absolute;
  top: -16px;
  left: 3px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background-color: #666666;
}

.hourglassGlass {
  -webkit-perspective: 100px;
          perspective: 100px;
  position: absolute;
  top: 32px;
  left: 20px;
  width: 10px;
  height: 6px;
  background-color: #666666;
}
.hourglassGlass:before, .hourglassGlass:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #666666;
  left: -17px;
  width: 44px;
  height: 28px;
}
.hourglassGlass:before {
  top: -27px;
  border-radius: 0 0 25px 25px;
}
.hourglassGlass:after {
  bottom: -27px;
  border-radius: 25px 25px 0 0;
}

.hourglassCurves:before, .hourglassCurves:after {
  content: "";
  display: block;
  position: absolute;
  top: 32px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: transparent;
  -webkit-animation: hideCurves 2s ease-in 0s infinite;
          animation: hideCurves 2s ease-in 0s infinite;
}
.hourglassCurves:before {
  left: 15px;
}
.hourglassCurves:after {
  left: 29px;
}

@-webkit-keyframes hideCurves {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hideCurves {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.hourglassSandStream:before {
  content: "";
  display: block;
  position: absolute;
  left: 24px;
  width: 3px;
  background-color: white;
  -webkit-animation: sandStream1 2s ease-in 0s infinite;
          animation: sandStream1 2s ease-in 0s infinite;
}
.hourglassSandStream:after {
  content: "";
  display: block;
  position: absolute;
  top: 36px;
  left: 19px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  -webkit-animation: sandStream2 2s ease-in 0s infinite;
          animation: sandStream2 2s ease-in 0s infinite;
}

@-webkit-keyframes sandStream1 {
  0% {
    height: 0;
    top: 35px;
  }
  50% {
    height: 0;
    top: 45px;
  }
  60% {
    height: 35px;
    top: 8px;
  }
  85% {
    height: 35px;
    top: 8px;
  }
  100% {
    height: 0;
    top: 8px;
  }
}

@keyframes sandStream1 {
  0% {
    height: 0;
    top: 35px;
  }
  50% {
    height: 0;
    top: 45px;
  }
  60% {
    height: 35px;
    top: 8px;
  }
  85% {
    height: 35px;
    top: 8px;
  }
  100% {
    height: 0;
    top: 8px;
  }
}
@-webkit-keyframes sandStream2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sandStream2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.hourglassSand:before, .hourglassSand:after {
  content: "";
  display: block;
  position: absolute;
  left: 6px;
  background-color: white;
  -webkit-perspective: 500px;
          perspective: 500px;
}
.hourglassSand:before {
  top: 8px;
  width: 39px;
  border-radius: 3px 3px 30px 30px;
  -webkit-animation: sandFillup 2s ease-in 0s infinite;
          animation: sandFillup 2s ease-in 0s infinite;
}
.hourglassSand:after {
  border-radius: 30px 30px 3px 3px;
  -webkit-animation: sandDeplete 2s ease-in 0s infinite;
          animation: sandDeplete 2s ease-in 0s infinite;
}

@-webkit-keyframes sandFillup {
  0% {
    opacity: 0;
    height: 0;
  }
  60% {
    opacity: 1;
    height: 0;
  }
  100% {
    opacity: 1;
    height: 17px;
  }
}

@keyframes sandFillup {
  0% {
    opacity: 0;
    height: 0;
  }
  60% {
    opacity: 1;
    height: 0;
  }
  100% {
    opacity: 1;
    height: 17px;
  }
}
@-webkit-keyframes sandDeplete {
  0% {
    opacity: 0;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  1% {
    opacity: 1;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  24% {
    opacity: 1;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  25% {
    opacity: 1;
    top: 41px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  50% {
    opacity: 1;
    top: 41px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  90% {
    opacity: 1;
    top: 41px;
    height: 0;
    width: 10px;
    left: 20px;
  }
}
@keyframes sandDeplete {
  0% {
    opacity: 0;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  1% {
    opacity: 1;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  24% {
    opacity: 1;
    top: 45px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  25% {
    opacity: 1;
    top: 41px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  50% {
    opacity: 1;
    top: 41px;
    height: 17px;
    width: 38px;
    left: 6px;
  }
  90% {
    opacity: 1;
    top: 41px;
    height: 0;
    width: 10px;
    left: 20px;
  }
}


.btn-outline {
	border:1px solid #121212;
	padding:20px;
	border-radius: 30px;
	color: #121212;
}

.btn-outline:hover {
/*	background: linear-gradient(#53e2fc,#1985f9);*/
	background:#b8aec8;
	border-color: #1985f9;
	color: #fff;
}

.page-404 {
	margin-top: 5%;
}


@media screen and (max-width: 768px) {
	.align-all-center {
		display: block;
	}
	.w3lsg-bubbles {
		padding:0;
	}
	.message-404 h1 {
		font-size: 10em;
	}
	.message-404 {
		margin-bottom:50px;
	}
}

@media screen and (max-width: 480px) {
	h2, .h2, .heading h2 {
		font-size: 25px;
		line-height: 1.5em;
	}

}