body, button, input, textarea, h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
}

body#login-page {
    background-image: url(../images/login-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-position: 50%, 50%;
    padding-top: 100px;
}

#login-page > div {
    width: 500px;
    margin: 100px auto 0px;
    text-align: center;
}

#login-page > div > img {
	width: 200px;
}
.login-window {
	background-color: rgba(256, 256, 256, 0.7);
	width: 100%;
	border-radius: 6px;
	margin-top: 25px;
	padding: 50px 25px;
	text-align: left;
}
.form-control.login-input {
	border-radius: 0px;
	height: 50px;
}
.form-control.login-input:focus {
	box-shadow: none;
	outline: none;
	border-color: #4d4d4d;
}
#forgot label.control-label, #login label.control-label {
	font-weight: 700;
}
#login div div {
	display: inline-block;
	vertical-align: top;
	margin-top: 15px;
}
#login div div a {
	color: #666;
	font-size: 85%;
}
#login div div label.css-label {
	font-size: 85%;
	font-weight: normal;
	line-height: 1.3;
	margin-top: 0px;
	padding-left: 22px;
	margin-left: 5px;
}
#forgot div.submit-button, #login div.submit-button {
	text-align: center;
}
#forgot div.submit-button button,#login div.submit-button button {
	width: 200px;
	padding: 8px 0px;
	margin-top: 15px;
	border-radius: 2px;
	font-weight: 300;
}
#forgot h6 ,#login h6 {
	text-align: center;
	font-size: 100%;
}
#forgot h6 a,#login h6 a {
	color: #666;
	margin-top: 15px;
}
@-webkit-keyframes login-shake {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-2deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(2deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(2deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-2deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-2deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(2deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-2deg); }
}
@-moz-keyframes login-shake {
	0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
	10% { -moz-transform: translate(-1px, -2px) rotate(-2deg); }
	20% { -moz-transform: translate(-3px, 0px) rotate(2deg); }
	30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
	40% { -moz-transform: translate(1px, -1px) rotate(2deg); }
	50% { -moz-transform: translate(-1px, 2px) rotate(-2deg); }
	60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -moz-transform: translate(2px, 1px) rotate(-2deg); }
	80% { -moz-transform: translate(-1px, -1px) rotate(2deg); }
	90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
	100% { -moz-transform: translate(1px, -2px) rotate(-2deg); }
}
.shake {
	-webkit-animation-name: login-shake;
	-webkit-animation-duration: 0.1s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: login-shake;
	-moz-animation-duration: 0.1s;
	-moz-transform-origin:50% 50%;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
	display:inline-block
}
#forgot span.error,#login span.error {
	display: none;
	font-size: 85%;
	font-weight: 600;
	color: #dd584c;
}


/* flip css */
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
}
.flip-container.flip .flipper {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.flipper {
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}
.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.front {
	z-index: 2;
	/* for firefox 31 */
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}



label.control-label {
	text-transform: uppercase;
	font-weight: normal;
	color: #666;
	font-size: 8pt;
	margin-bottom: 0px;
}

.top-0{ margin-top: 0px !important; }
.top-25{ margin-top: 25px }
.bot-25{ margin-bottom: 25px; }
.pull-right { float: right !important; }


input[type=checkbox].css-checkbox {
	position: absolute; 
	overflow: hidden; 
	clip: rect(0 0 0 0); 
	height:1px; 
	width:1px; 
	margin:-1px; 
	padding:0;
	border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
	padding-left:27px;
	height:15px; 
	display:inline-block;
	line-height:17px;
	background-repeat:no-repeat;
	background-position: 0 0;
	background-size: contain;
	font-size:11px;
	vertical-align:middle;
	cursor:pointer;
	background-image:url(../images/unchecked.png);
	margin-bottom: 7px;
	margin-top: 7px;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
	background-repeat:no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image:url(../images/checked.png);
}

.unselectable{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.clickable { 
	cursor: pointer 
}


.btn-charcoal {
  	color: #ffffff;
 	background-color: #4d4d4d;
}
.btn-charcoal:hover,
.btn-charcoal:focus,
.btn-charcoal:active,
.btn-charcoal.active{
  	color: #ffffff;
  	background-color: #666;
  	border-color: #666;
}