﻿@CHARSET "UTF-8";
/*
over-ride "Weak" message, show font in dark grey
*/

.progress-bar {
    color: #333;
} 

/*
Reference:
http://www.bootstrapzen.com/item/135/simple-login-form-logo/
*/

* {
    -webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	outline: none;
}

    .form-control {
	  position: relative;
	  font-size: 16px;
	  height: auto;
	  padding: 10px;
		@include box-sizing(border-box);

		&:focus {
		  z-index: 2;
		}
	}

body {

}

.login-form {
	margin-top: 60px;
}

form[role=login] {
	/*color: #5d5d5d;
    background: #cce6f0;*/
	color: #e2e2e2;
	
	/*background: #1C3AA9;*/
	background: -webkit-linear-gradient(to top, #1C3AA9, #e2e2e2);
	background: -moz-linear-gradient(to top, #1C3AA9, #e2e2e2);
	background: -o-linear-gradient(to top, #1C3AA9, #e2e2e2);
	background: linear-gradient(to top, #1C3AA9, #e2e2e2);

	padding: 26px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
	form[role=login] img {
		display: block;
		margin: 0 auto;
		margin-bottom: 35px;
	}
	form[role=login] input,
	form[role=login] button {
		font-size: 18px;
		margin: 16px 0;
	}
	form[role=login] > div {
		text-align: center;
	}

	
.form-links {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 50px;
}
.form-links a {
	color: #fff;
}

#SignIn:hover {
	background-color: #288218;
}

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

/*-- end reset --*/
body {
	background: #2A56C6;
	/* fallback for old browsers */
	/*
	background: -webkit-linear-gradient(to top, #d9dcdc, #f9ffff);
	background: -moz-linear-gradient(to top, #d9dcdc, #f9ffff);
	background: -o-linear-gradient(to top, #d9dcdc, #f9ffff);
	background: linear-gradient(to top, #d9dcdc, #f9ffff);
	*/
	background: -webkit-linear-gradient(to top, #1C3AA9, #e2e2e2);
	background: -moz-linear-gradient(to top, #1C3AA9, #e2e2e2);
	background: -o-linear-gradient(to top, #1C3AA9, #e2e2e2);
	background: linear-gradient(to top, #1C3AA9, #e2e2e2);
		
	background-size: cover;
	background-attachment: fixed;
	font-family: 'Roboto', sans-serif;
}



/*-- //copyright --*/
	.colorlibcopy-agile p {
	margin-top: 20px;
	font-size: smaller;
	color: #69845c;
	text-align: center;
	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 {
		font-size: smaller;
		color: #e9ead0;
		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: #fff;
		}

.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: transparent;
		/*background-image: url("../../img/fleeteye_logo.png");*/
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		opacity: 0.9;

		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: 50%;
			width: 120px;
			height: 120px;
			-webkit-animation-delay: 9s;
			animation-delay: 9s;
		}

		.colorlib-bubbles li:nth-child(11) {
			left: 65%;
			width: 55px;
			height: 55px;
			-webkit-animation-delay: 22s;
			animation-delay: 22s;
		}

		.colorlib-bubbles li:nth-child(12) {
			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);
	}
}


