html,
		body,
		div,
		span,
		applet,
		object,
		iframe,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		blockquote,
		pre,
		a,
		abbr,
		acronym,
		address,
		big,
		cite,
		code,
		del,
		dfn,
		em,
		img,
		ins,
		kbd,
		q,
		s,
		samp,
		small,
		strike,
		strong,
		sub,
		sup,
		tt,
		var,
		b,
		u,
		i,
		dl,
		dt,
		dd,
		ol,
		nav ul,
		nav li,
		fieldset,
		form,
		label,
		legend,
		table,
		caption,
		tbody,
		tfoot,
		thead,
		tr,
		th,
		td,
		article,
		aside,
		canvas,
		details,
		embed,
		figure,
		figcaption,
		footer,
		header,
		hgroup,
		menu,
		nav,
		output,
		ruby,
		section,
		summary,
		time,
		mark,
		audio,
		video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}

		article,
		aside,
		details,
		figcaption,
		figure,
		footer,
		header,
		hgroup,
		menu,
		nav,
		section {
			display: block;
		}

		ol,
		ul {
			list-style: none;
			margin: 0px;
			padding: 0px;
		}

		blockquote,
		q {
			quotes: none;
		}

		blockquote:before,
		blockquote:after,
		q:before,
		q:after {
			content: '';
			content: none;
		}

		table {
			border-collapse: collapse;
			border-spacing: 0;
		}

		/*-- start editing from here --*/
		a {
			text-decoration: none;
		}

		.txt-rt {
			text-align: right;
		}

		/* text align right */
		.txt-lt {
			text-align: left;
		}

		/* text align left */
		.txt-center {
			text-align: center;
		}

		/* text align center */
		.float-rt {
			float: right;
		}

		/* float right */
		.float-lt {
			float: left;
		}

		/* float left */
		.clear {
			clear: both;
		}

		/* clear float */
		.pos-relative {
			position: relative;
		}

		/* Position Relative */
		.pos-absolute {
			position: absolute;
		}

		/* Position Absolute */
		.vertical-base {
			vertical-align: baseline;
		}

		/* vertical align baseline */
		.vertical-top {
			vertical-align: top;
		}

		/* vertical align top */
		nav.vertical ul li {
			display: block;
		}

		/* vertical menu */
		nav.horizontal ul li {
			display: inline-block;
		}

		/* horizontal menu */
		img {
			max-width: 100%;
		}

		/*-- end reset --*/
		body {
			background-image: url(../assets/images/bg-about.png);
			/* fallback for old browsers */

			height: 100%;
			background-size: cover;
			background-attachment: fixed;
			font-family: monospace;
		}

		h1 {
			font-size: 3em;
			text-align: center;
			color: #fff;
			font-weight: 100;
			text-transform: capitalize;
			letter-spacing: 4px;
			font-family: 'Roboto', sans-serif;
		}

		/*-- main --*/
		.main-w3layouts {
			padding: 1em 0 1em;
		}


		.main-agileinfo {
			/* width: 55%; */
			margin: 1em auto;

			background-size: cover;
			border-radius: 8px;
			/* padding: 20px; */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
				0 8px 16px rgba(0, 0, 0, 0.1);

			background-image: url(../assets/images/bg-about.png);
		}

		.agileits-top {
			padding: 1em;
		}

		input[type="text"],
		input[type="email"],
		input[type="password"] {
			font-size: 0.9em;
			color: #222;
			font-weight: 100;
			width: 60.5%;
			display: block;
			border: 2px solid #A4C639;
			padding: 0.8em 0.8em;
			border-radius: 50px;
			/* background-position: -800px 0; */
			background-size: 100%;
			background-repeat: no-repeat;
			color: #222;
			font-family: 'Roboto', sans-serif;
		}

		input.email,
		input.text.w3lpass {
			margin: 2em 0;
		}

		.text:focus,
		.text:valid {
			box-shadow: none;

			background-position: 0 0;
		}

		.text:focus::-webkit-input-placeholder,
		.text:valid::-webkit-input-placeholder {
			color: aliceblue;
			font-size: .9em;
			
			visibility: visible !important;
		}

		::-webkit-input-placeholder {
			color: #222;
			font-weight: 100;
		}

		:-moz-placeholder {
			/* Firefox 18- */
			color: #fff;
		}

		::-moz-placeholder {
			/* Firefox 19+ */
			color: #fff;
		}

		:-ms-input-placeholder {
			color: #fff;
		}

		input[type="submit"] {
			font-size: .9em;
			color: #fff;
			background: #A4C639;
			outline: none;
			border: 1px solid #76b852;
			cursor: pointer;
			padding: 0.9em;
			-webkit-appearance: none;
			width: 100%;
			margin: 2em 0;
			letter-spacing: 4px;
		}

		input[type="submit"]:hover {
			-webkit-transition: .5s all;
			-moz-transition: .5s all;
			-o-transition: .5s all;
			-ms-transition: .5s all;
			transition: .5s all;
			background: #235A81;
		}

		.agileits-top p {
			font-size: 1em;
			color: #222;
			text-align: center;
			letter-spacing: 1px;
			font-weight: 300;
		}

		.agileits-top p a {
			color: #222;
			-webkit-transition: .5s all;
			-moz-transition: .5s all;
			transition: .5s all;
			font-weight: 400;
		}

		.agileits-top p a:hover {
			color: #76b852;
		}

		/*-- //main --*/
		/*-- checkbox --*/
		.wthree-text label {
			font-size: 0.9em;
			color: #fff;
			font-weight: 200;
			cursor: pointer;
			position: relative;
		}

		input.checkbox {
			background: #8DC26F;
			cursor: pointer;
			width: 1.2em;
			height: 1.2em;
		}

		input.checkbox:before {
			content: "";
			position: absolute;
			width: 1.2em;
			height: 1.2em;
			background: inherit;
			cursor: pointer;
		}

		input.checkbox:after {
			content: "";
			position: absolute;
			top: 0px;
			left: 0;
			z-index: 1;
			width: 1.2em;
			height: 1.2em;
			border: 1px solid #fff;
			-webkit-transition: .4s ease-in-out;
			-moz-transition: .4s ease-in-out;
			-o-transition: .4s ease-in-out;
			transition: .4s ease-in-out;
		}

		input.checkbox:checked:after {
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
			height: .5rem;
			border-color: #fff;
			border-top-color: transparent;
			border-right-color: transparent;
		}

		.anim input.checkbox:checked:after {
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
			height: .5rem;
			border-color: transparent;
			border-right-color: transparent;
			animation: .4s rippling .4s ease;
			animation-fill-mode: forwards;
		}

		@keyframes rippling {
			50% {
				border-left-color: #fff;
			}

			100% {
				border-bottom-color: #fff;
				border-left-color: #fff;
			}
		}

		/*-- //checkbox --*/
		/*-- copyright --*/
		.colorlibcopy-agile {
			margin: 2em 0 1em;
			text-align: center;
		}

		.colorlibcopy-agile p {
			font-size: .9em;
			color: #fff;
			line-height: 1.8em;
			letter-spacing: 1px;
			font-weight: 100;
		}

		.colorlibcopy-agile p a {
			color: #fff;
			transition: 0.5s all;
			-webkit-transition: 0.5s all;
			-moz-transition: 0.5s all;
			-o-transition: 0.5s all;
			-ms-transition: 0.5s all;
		}

		.colorlibcopy-agile p a:hover {
			color: #000;
		}

		/*-- //copyright --*/
		.wrapper {
			position: relative;
			overflow: hidden;
		}

		.colorlib-bubbles {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.colorlib-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%;
		}

		.colorlib-bubbles li:nth-child(1) {
			left: 10%;
		}

		.colorlib-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;
		}

		.colorlib-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;
		}

		.colorlib-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);
		}

		.colorlib-bubbles li:nth-child(5) {
			left: 70%;
		}

		.colorlib-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);
		}

		.colorlib-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;
		}

		.colorlib-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;
		}

		.colorlib-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);
		}

		.colorlib-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(-700px) rotate(600deg);
				-moz-transform: translateY(-700px) rotate(600deg);
				-o-transform: translateY(-700px) rotate(600deg);
				-ms-transform: translateY(-700px) rotate(600deg);
				transform: translateY(-700px) 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(-700px) rotate(600deg);
				-moz-transform: translateY(-700px) rotate(600deg);
				-o-transform: translateY(-700px) rotate(600deg);
				-ms-transform: translateY(-700px) rotate(600deg);
				transform: translateY(-700px) rotate(600deg);
			}
		}

		/*-- responsive-design --*/
		@media(max-width:1440px) {

			input[type="text"],
			input[type="email"],
			input[type="password"] {
				width: 94%;
			}
		}

		@media(max-width:1366px) {
			h1 {
				font-size: 2.6em;
			}

			.agileits-top {
				padding: 2.5em;
			}

			.main-agileinfo {
				margin: 2em auto;
			}

			.main-agileinfo {
				width: 36%;
			}
		}

		@media(max-width:1280px) {
			.main-agileinfo {
				width: 40%;
			}
		}

		@media(max-width:1080px) {
			.main-agileinfo {
				width: 46%;
			}
		}

		@media(max-width:1024px) {
			.main-agileinfo {
				width: 49%;
			}
		}

		@media(max-width:991px) {
			h1 {
				font-size: 2.4em;
			}

			.main-w3layouts {
				padding: 2em 0 1em;
			}
		}

		@media(max-width:900px) {
			.main-agileinfo {
				width: 58%;
			}

			input[type="text"],
			input[type="email"],
			input[type="password"] {
				width: 93%;
			}
		}

		@media(max-width:800px) {
			h1 {
				font-size: 2.2em;
			}
		}

		@media(max-width:736px) {
			.main-agileinfo {
				width: 62%;
			}
		}

		@media(max-width:667px) {
			.main-agileinfo {
				width: 67%;
			}
		}

		@media(max-width:600px) {
			.agileits-top {
				padding: 2.2em;
			}

			input.email,
			input.text.w3lpass {
				margin: 1.5em 0;
			}

			input[type="submit"] {
				margin: 2em 0;
			}

			h1 {
				font-size: 2em;
				letter-spacing: 3px;
			}
		}

		@media(max-width:568px) {
			.main-agileinfo {
				width: 75%;
			}

			.colorlibcopy-agile p {
				padding: 0 2em;
			}
		}

		@media(max-width:480px) {
			h1 {
				font-size: 1.8em;
				letter-spacing: 3px;
			}

			.agileits-top {
				padding: 1.6em;
			}

			input[type="text"],
			input[type="email"],
			input[type="password"] {
				width: 91%;
			}

			.agileits-top p {
				font-size: 0.9em;
			}
		}

		@media(max-width:414px) {
			h1 {
				font-size: 1.8em;
				letter-spacing: 2px;
			}

			.main-agileinfo {
				width: 85%;
				margin: 1.5em auto;
			}

			.text:focus,
			.text:valid {
				background-position: 0 0px;
			}

			.wthree-text ul li,
			.wthree-text ul li:nth-child(2) {
				display: block;
				float: none;
			}

			.wthree-text ul li:nth-child(2) {
				margin-top: 1.5em;
			}

			input[type="submit"] {
				margin: 2em 0 1.5em;
				letter-spacing: 3px;
			}

			input[type="submit"] {
				margin: 2em 0 1.5em;
			}

			.colorlibcopy-agile {
				margin: 1em 0 1em;
			}
		}

		@media(max-width:384px) {
			.main-agileinfo {
				width: 88%;
			}

			.colorlibcopy-agile p {
				padding: 0 1em;
			}
		}

		@media(max-width:375px) {
			.agileits-top p {
				letter-spacing: 0px;
			}
		}

		@media(max-width:320px) {
			.main-w3layouts {
				padding: 1.5em 0 0;
			}

			.agileits-top {
				padding: 1.8em;
			}

			.colorlibcopy-agile {
				margin: 0 0 1em;
			}

			input[type="text"],
			input[type="email"],
			input[type="password"] {
				width: 89.5%;
				font-size: 0.85em;
			}

			h1 {
				font-size: 1.7em;
				letter-spacing: 0px;
			}

			.main-agileinfo {
				width: 92%;
				margin: 1em auto;
			}

			.text:focus,
			.text:valid {
				background-position: 0 0px;
			}

			input[type="submit"] {
				margin: 1.5em 0;
				padding: 0.8em;
				font-size: .85em;
			}

			.colorlibcopy-agile p {
				font-size: .85em;
			}

			.wthree-text label {
				font-size: 0.85em;
			}

			.main-w3layouts {
				padding: 1em 0 0;
			}
		}

		div#invalidreg {
			color: red;
			display: none;
		}

		.pins a {
			margin-bottom: 20px;
			padding: 8px 8px;
			background-color: #76b852;
			border-radius: 5px;
			color: #fff;
			font-size: 14px;
		}

		.wrapper i {
			cursor: pointer;
			font-weight: bolder;
		}
		.wrapper h1{
			font-weight: bolder;
			font-family: monospace;
		}