.invalid-field{
	background-color:#B6334C !important;
	color:white;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/* Just to get a transition for the corrected fields entered to combat 'invalid-field'*/
.valid-field{
	background-color:transparent;
	color: black;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#error-message{
	color:#B6334C;
	margin-top: 15px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}



/******* State Properties ********/
.is-hidden{
	display:none;
}

.is-invisible{
	visibility: hidden;
}

.is-visited{
	background:#f5f5f5;
	color: #16a085;
}

.is-unvisited{
	background:#f5f5f5;
}

.is-active{
	background: #16a085;
	color: white;
}

.is-disabled {
 	pointer-events: none;
 	cursor: default;
}

.min-btn-padding{
	padding:4px 8px;
}

.main-login{
	left: 25%;
	width: 50%;
}


/*Theme Styles*/

.light-blue{color:#3498DB;}
.green{color:#00C957;}
.red{color: red;}
.maroon{color:#C0392B;}
.dark-green{color: #27AE60;}
.lemon-yellow{color:#2ECC71;}
.orange-yellow{color:#F39C12;}
.orange{color:#E67E22;}
.dark-orange{color:#D35400;}
.yellow{color:yellow;}
.white{color: white;}
.light-grey{color : #ECF0F1;}

.background-light-blue{background-color: #3498DB;}
.background-green{background-color: #1ABC9C;}
.background-red{background-color: red;}
.background-maroon{background-color: #C0392B;}
.background-dark-green{background-color: #16A085;}
.background-lemon-yellow{background-color:#F1C40F;}
.background-orange-yellow{background-color:#F39C12;}
.background-orange{background-color:#E67E22;}
.background-dark-orange{background-color:#D35400;}
.background-yellow{background-color:yellow;}
.background-white{background-color: white;}
.background-light-grey{background-color : #ECF0F1;}

/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(image/Preloader_2.gif) center no-repeat #fff;
}


/*Base Style*/
footer{
	bottom:0px;
	left:0px;
	width:100%;
	line-height: 35px;
	text-align: center;
	font-weight: bold;
	background-color: #CCC;
}

/* Setting the background image*/

#background{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background: url('image/college_1.jpg') ;*/
	background-repeat: no-repeat;
	background-position:center;
	background-attachment: fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index: -1;
 }

 .background-image-blur{
 	-webkit-filter: blur(45px);
    -moz-filter: blur(45px);
    -o-filter: blur(45px);
    -ms-filter: blur(45px);
    filter: blur(45px);

    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;

    transition: all 2s ease-out;
 }


/*To give the gradient to the background image in "#background"*/

/*.FadeAway{
    position: absolute; top:0px; left:0px; width:100%; height:100%;
        background:transparent;
        background: linear-gradient(top, rgba( 255, 255, 255, 255 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -moz-linear-gradient(top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -ms-linear-gradient(top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);

}*/

#header{
	width:100%;
	/*height:100px;*/
}

	.desktop-header{
		height: 100px;
	}

	.mobile-header{
		height: 0px;
	}

/* These 2 are temp styles. Get rid of them later*/
	#header-text h3{
		text-align: center;
		font-size: 30px;
	}

	#header-text p{
		text-align: center;
		font-size:20px;
	}

.form-body{
    margin:25px;
}

.form-top-right{
	width : 25%;
	float:left;
	font-size: 66px;
}
.form-top-left{
	width : 75%;
	float:left;
}

.form-element{
	display: inline;
	width:100%;
}
	button.form-element{
		margin-bottom: 20px;
	}

.module-form{
	/*border:1px solid blue;*/
	background-color: #ECF0F1;
	display: inline-block;
    vertical-align: middle;
    padding-left: 0px;
    padding-right: 0px;
	border-radius: 5px;
    opacity: 0;	/*We are going to animate this */
}
	.module-heading{
		margin:20px 0px;
	}


@media (min-width:768px){


	.middle-border {
	    min-height: 300px;
	    margin-top: 100px;
	    border-right: 1px solid #000;
	    border-right: 1px solid rgba(0, 0, 0, 0.6);
	}

	.mobile{
		display: none;
	}

	.desktop{
		display: inline;
	}

	.glyphicon-validation{
		font-size:15px;
		margin: 7px;
	}

}
@media (max-width:767px){


	.middle-border {
	    min-height: auto;
	    margin: 65px 30px 0 30px;
	    border-right: 0;
	}

	.mobile{
		display: inline;
		margin:20px 0px;
	}

	.desktop{
		display: none;
	}

	.glyphicon-validation{
		font-size:10px;
		margin: 7px;
	}
}

/* Just to remove the default padding of bootstrap's col-*-* 
* mainly need this for the form-heading*/

/*#main-login{
	padding-left:0px;
	padding-right: 0px;
}*/



.form-header{
	width:100%;
	padding: 30px;
	background-color:#624DA0;
}

.multi-form-wrapper{
	/*margin-bottom:20px;*/
}

.modal-footer
{
	padding-right:25px;
}

.card_icon{
	width:100%;
	min-width:100px;
}

.form-container
{
	padding:10px;
}

.carousel-control.right, .carousel-control.left
{
	background-image: none;
}

.carousel-indicators li,.carousel-indicators .active
{
	box-shadow: 1px 1px 1px #666;
}

.form-header-login{
	background-color:#F79545;
}

.form-header-menu{
	padding-top:0px;
}

.login-btn
{
	background-color:#F79545;
}

.login-btn:hover
{
    background-color: #F15A54;
    /*border-color: #F15A54;*/
}

.login-btn:active
{
    background-color: #F15A54;
    /*border-color: #F15A54;*/
}


/* STYLE FOR NAVBAR */
.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse {
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-collapse.collapse.in {
	display: block !important;
}

.navbar-nav {
  float: none!important;
  margin: 7.5px -15px;
}
.navbar-nav>li {
  float: none;
}
.navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar-inner {
	background:transparent;
}


.navbar {
  height: 40px;
  background-color: transparent;
  background-color: #624DA0;
  border: none;
  color: white;
  z-index: 100;
  transition: background-color 1s ease 0s;
  margin:0px;
  border-radius: 5px 5px 0px 0px;
}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
	background-color: #F15A54;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
	color: #fff;
	background-color: #F15A54;
	
}

.navbar-collapse {
	border-top: 0px solid transparent;
	padding-left: 100px;
}