@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url("bootstrap.min.css");
@import url(animate.css);
body
{
	position: relative;
	background:#315488;
	height:100%;
	min-height:100%;
	color:#ffffff;
	transition:all 0.3s;
}
h1 { font-family:'Open Sans',sans-serif; font-weight:300; line-height: 0.6; }
h1 strong { font-weight:600; }
h1 small { font-size:15px; color:white; }
html { height:100%; }
a { color:white !important; }
#time
{
	transition:all 0.3s;
	font-size:60px !important; 
	text-align:center; 
	font-weight:100; 
	font-family:'Open Sans',sans-serif;
	  position: absolute;
	  right: 0;
	  bottom: 0;
	  left: 0;	
}
.profile-pic img {
    width:160px;
    height:160px;
    border-radius:50%;
    -webkit-border-radius:50%;
    border:10px solid #f1f2f7;
	z-index:0; margin:auto; position:absolute;
	left:0px; right:0px;
	transition:all 0.3s;
}

#bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    background-size: cover !important;
}

#loginBox
{
  width: 50%;
  height: 350px;
  margin: auto;
  position: absolute;
  top: 0px; left: 0px; bottom: 0px; right: 0px;	
  z-index:1060;
}

#lockBox
{
	width:100% !important; height:100% !important;
	z-index:99999999;
	position:relative;
}

#lockBox article
{
  width: 80%;
  opacity:100;
  height: 300px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;	
}

#lockBox article .unlock
{
	background:#ffffff !important;
	border-radius:10px; height:80px;
	padding:20px; z-index:0;
	margin-top:40px;
}

#lockBox article .unlock h2 { color:#475d6f; margin:10px !important; font-size:19px !important; }
#lockBox article .unlock .pull-right { width:38% !important; }
#lockBox article p { text-align:center; margin-top:50px; font-weight:bold; font-family:'Open Sans',sans-serif; }

#content { padding:50px; position:relative; }

.avatar { width:80px; float:left; margin-right:20px; }
.avatar img { width:100%; }
.details:after { display:block; visibility:hidden; content:""; clear:both; margin-bottom:20px; }

/*.form-control { background:#f1f1f1 !important; }*/

.form-control
{
	color:#ffffff !important;
	background:rgba(255,255,255,0.2) !important; 
	border:0px !important;
	box-shadow:0px !important;
    border-radius: 0px !important;
}

.form-control:focus 
{ 
	background:rgba(255,255,255,0.8) !important; 
	color:#666 !important;
	transition:background 1s;
}



.form-control::-moz-placeholder { color: #666 !important;
    opacity: 1;
}
.form-control:-ms-input-placeholder {
    color: #777;
}
.form-control::-webkit-input-placeholder {
    color: #777;
}

.input-group-addon
{ 
	background:#427baf !important; 
	color:#ffffff;
	border-radius: 0px !important;
	border:0px !important;
	padding:0px 20px 0px 20px !important;
}

.shadow
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.shadow:before, .shadow:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 20px;
    border-radius:100px / 20px;
} 
.shadow:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

#lockBox article.unlock:after { display:block; visibility:hidden; content:""; clear:both; }

@media only screen and (max-width: 479px) 
{
	#loginBox { width:99%; }
	#lockBox article p { margin-top:10px; }
	#time { font-size:30px !important; }
	#lockBox article .unlock { margin-top:50px; }
	#lockBox article .unlock .pull-right,
	#lockBox article .unlock .pull-left { width:100% !important; }
	#lockBox .pull-left,
	#lockBox .pull-right { float:none !important; display:block; }
	#lockBox article .unlock { height:auto !important; }
	#time { display:none; }	
	.profile-pic img { position:relative; float:right; width:100px; height:100px; }
}

@media only screen and (min-width: 520px) 
{
}