@charset "utf-8";
/* CSS Document */

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after { 
font-size: 20px;
  margin: auto;
}

BODY{
	margin: 0px;
	padding: 0px;
	
	text-align: right;
	
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
}

.bg{
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	
	background: rgb(179,220,237); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	z-index: 1;
}

.bg .mask{
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	
	z-index: 2;
	background-color: #FFF;
	opacity: .5;
	-moz-opacity: .5;
	-webkit-opacity: .5;
}

.bg .images{
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	
	background-repeat: no-repeat;
	background-position:center center;
	background-origin:border-box;
	background-attachment:fixed;
	background-size:cover;
	
	z-index: 1;
}

.bg .image{
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	
	background-repeat: no-repeat;
	background-position:center center;
	background-origin:border-box;
	background-attachment:fixed;
	background-size:cover;
	
	z-index: 1;
}

.bg .display{
	display: block;
	position: fixed;
	top: 50%;
	left: 0px;
	right: 550px;
	bottom: 0px;
	
	z-index: 3;
	
	color:#FFF;
	text-align: center;
	font-size: 5em;
	font-size: 5vw;
	font-weight: 300;
	
	line-height: 16px;
	white-space: nowrap;
}

.bg .display .time{
	font-size: 3em;
	line-height: 16px;
	margin-top: -15px;
}

.bg .display .date{
	font-size: .9em;
	line-height: 16px;
	margin-top: 120px;
}

@media only screen and (max-width: 900px) {
	.bg .display{
		display: none;
	}
}

H3{
	font-weight: 300;
}

.form-group{
	display: block;
	padding: 0px;
	margin-bottom: 15px;
	
	clear: both;
}

.form-group .left,
.form-group .right{
	display: inline-block;
	float: left;
	width: 50%;
	text-align: left;
}

.form-group .left{
	padding-top: 10px;
}

.form-group .right{
	text-align: right;
}

.form-group .error{
	text-align: left;
	font-size: .8em;
}

.input-group{
	display: block;
	padding: 5px 15px;
	
	background-color: #FFF;
	border: solid 1px #C9C9C9;
	
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	text-align: left;
	
	white-space: nowrap;
}

.input-group .form-control{
	float: none;
	
	border: none;
	background: transparent;
	
	padding: 5px;
	font-size: 13pt;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	
	vertical-align: middle;
	
	width: calc(100% - 30px);
}

.input-group .input-group-addon{
	display: inline-block;
	margin: 0px;
	padding: 0px;
	margin-right: 20px;
	vertical-align: middle;
	background: none;
	border: none;
}

.input-group .input-group-addon.icon{
	padding: 5px;
	
	opacity: .5;
	-moz-opacity: .5;
	-webkit-opacity: .5;	
}

.input-group .input-group-addon.icon *{
	font-size: 1.2em;
}


.form-group.inline .input-group{
	display: inline-block;
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: middle;
}

.form-group.inline .input-group .form-control{
	max-width: 150px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.form-group.inline .input-group + BUTTON{
	margin: 15px;
	vertical-align: middle;
}


INPUT.convert-check{
	visibility: hidden;
	display: none;
}

INPUT.convert-check + LABEL:before,
INPUT.convert-check + LABEL::before{
	font-family: 'Flaticon';
	font-style: normal;
	
	display: inline-block;
	content: "\f101";
	margin-right: 10px;
	
	opacity: .25;
	-moz-opacity: .25;
	-webkit-opacity: .25;
}

INPUT.convert-check:checked + LABEL:before,
INPUT.convert-check:checked + LABEL::before{
	content: "\f102";
	
	opacity: 1;
	-moz-opacity: 1;
	-webkit-opacity: 1;
}


INPUT.convert-check + LABEL{
	font-weight: 300;
	cursor: pointer;
}

INPUT.convert-check:checked + LABEL{
	color:#06F;
}

.btn{
	border: none;
	background: transparent;
	display:inline-block;
	cursor:pointer;
	padding:8px 20px;
	text-decoration:none;
	
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size:12pt;
}

.btn-primary {
	background-color:#009ece;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #008dcf;
	color:#ffffff;
	text-shadow:0px 1px 0px #006c9e;
}
.btn-primary:hover {
	background-color:#0087a5;
}
.btn-primary:active {
	position:relative;
}


/* SECTIONS */
SECTION{
	display: block;
	position: relative;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 2;
	
	min-height: 100%;
}

/* Container */
.container{
	position: relative;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 2;
	
	margin: 0px 0px 0px auto;
	
	max-width: 550px;
	min-height: 100%;
	
	background-color: #FFF;
	background-color: rgba(255,255,255, .9);
	
	text-align: center;
}

/* BRAND */ 
.brand{
	
}

.brand A,
.brand A:visited{
	text-decoration: none;
	color:#333;
}

.brand A IMG{
	min-width: 100px;
	min-height: 100px;
}

.default-logo{
	opacity: .25;
	-moz-opacity: .25;
	-webkit-opacity: .25;
}

/* HEADER */
HEADER{
	display: block;
	position: absolute;
	z-index:5;
	right: 15px;
	top: 15px;
}

/* FOOTER */
FOOTER{
	display: block;
	position: fixed;
	z-index: 4;
	left: 15px;
	bottom: 15px;
}

FOOTER .copyright{
	color: #FFF;
	font-size: 10pt;
}

FOOTER .copyright A, 
FOOTER .copyright A:visited{
	text-decoration: underline;
	color: #FFF;
}

FOOTER .copyright A:hover{
	color: #333;
}

FOOTER .copyright .brand IMG{
	max-height: 16px;
	vertical-align: middle;
}

@media only screen and (max-width: 780px) {
	FOOTER .copyright{
		color: #999;
	}
	
	FOOTER .copyright A, 
	FOOTER .copyright A:visited{
		color: #999;
	}
}

.content-area{
	padding: 15px 15px 50px 15px;
}

.form{
	
}

.form .links{
	clear: both;
	margin-top: 25px;
	padding-top: 25px;
	display: block;
	text-align: center;
}

.form .links A{
	text-decoration: none;
	font-size: .7em;
	color: #06F;
}

#login{
	
}

#login .form{
	max-width: 350px;
	display: block;
	margin: auto;
}


#lock-screen{
	
}

#lock-screen .brand{
	position: absolute;
	left: 15px;
	top: 15px;
	z-index: 5;
}

#lock-screen .brand A IMG{
	min-width: 50px;
	min-height: 50px;
}

#lock-screen .container{
}

#lock-screen .form{
	max-width: 400px;
	display: block;
	margin: auto;
}


.avatar{
	display: inline-block;
	
	width: 100px;
	height: 100px;
	line-height: 100px;
	
	padding: 5px;
	
	border: solid 1px #CCC;
	background-color: #FFF;
	
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	
	overflow: hidden;
}

.avatar-image{
	display: inline-block;
	
	width: 100px;
	height: 100px;
	line-height: 100px;
	
	background-color: #E0E0E0;
	
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	
	overflow: hidden;
	text-align: center;
}

.avatar-image [class^="flaticon-"]:before, 
.avatar-image [class*=" flaticon-"]:before,
.avatar-image [class^="flaticon-"]:after, 
.avatar-image [class*=" flaticon-"]:after {   
	font-family: Flaticon;
    font-size: 100px;
	font-style: normal;
	color: #FFF;
}

.avatar-image IMG{
	width: 100%;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}

.user-info{
	display: block;
	text-align: center;
	font-weight: 300;
	margin-bottom: 50px;
}

.user-info .profile{
	display: block;
	margin-bottom: 20px;
}

.user-info .name{
	color: #333;
}

.user-info .username{
	color: #999;
	font-size: .8em;
}