<style>
  .btn-login{color:#fff;background-color:#0077b3;border-color:#0077b3}
  .btn-login.focus,.btn-login:focus{color:#fff;background-color:#f1f3f4;color:black;border-color:#1b6d85}
  .btn-login:hover{color:#fff;background-color:#f1f3f4;color:black;border-color:#269abc}
  .btn-login.active,.btn-login:active,.open>.dropdown-toggle.btn-login{color:#fff;background-color:#f1f3f4;color:black;border-color:#269abc}
  .btn-login.active.focus,.btn-login.active:focus,.btn-login.active:hover,.btn-login:active.focus,.btn-login:active:focus,.btn-login:active:hover,.open>.dropdown-toggle.btn-login.focus,.open>.dropdown-toggle.btn-login:focus,.open>.dropdown-toggle.btn-login:hover{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-login.active,.btn-login:active,.open>.dropdown-toggle.btn-login{background-image:none}.btn-login.disabled.focus,.btn-login.disabled:focus,.btn-login.disabled:hover,.btn-login[disabled].focus,.btn-login[disabled]:focus,.btn-login[disabled]:hover,fieldset[disabled] .btn-login.focus,fieldset[disabled] .btn-login:focus,fieldset[disabled] .btn-login:hover{background-color:#5bc0de;border-color:#46b8da}.btn-login .badge{color:#5bc0de;background-color:#fff}
  hr {
    display: block;
    border-top: 1px solid #ccc;
}
html{
  height:100% !important;
}
body{
  height:100% !important;
}
p{
	font-size: 1 em;
}
#line {
  
    outline: 1px solid white;
    background-color: #e9f0f7;
    padding-bottom: 0px;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    color: black;

}
.loginbox{
  outline-style: ridge;outline-color: #6ec3f4;outline-width:4px;margin-top:-20px; box-shadow:
      0 0 0 10px hsl(0, 10%, 80%),
      0 0 0 15px hsl(0, 1%, 90%);
       background-color: white;
    }


.intro{
  height:100%;
}

.left{
  display : flex;
  justify-content : center;
  align-items : center;
  background-color:#0077b3;
  height : 100%;
  color : #FFF;

}
.right{
  display : flex;
   background-color: #e9f0f7;
  justify-content : center;
  align-items : center;
 
 
  height : 100%;
  color : #3d231b;
}
.about{
  display : flex;
  justify-content : center;
  align-items : center;
  background-color:#0077b3;
  color : #FFF;
  height:20%
}
.login
{
	font-size: 2em;
	color: black;
}
.image{
	width:400px;
	height: 250px;
}
@media (max-width: 800px) 
{ 
	p{
	font-size: 1em;
}
  .left{
  	height:80%;	
  }
 
  .right{
  	height:80%;
  
  }
  
  #line {
  
    outline: 1px solid white;
    background-color: #e9f0f7;
    padding-bottom: 0px;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;
    color: black;
    width:70%;

}
.image{
	width:300px;
	height: 200px;
}
.loginbox{
  outline-style: ridge;outline-color: #6ec3f4;outline-width:4px;margin-top:-20px; box-shadow:
      0 0 0 10px hsl(0, 10%, 80%),
      0 0 0 15px hsl(0, 1%, 90%);
    }
}
</style>