#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30vh;
}

#logo2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 20vh;
}

#apple {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 7vh;
}

h1 {
    text-align: center;
    font-size: 4.5vh;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

body, html{
  background:#fff;
  font-family: 'Open Sans', sans-serif;
}

.container{
  width:55vh;
  height:80vh;
  background:#fff;
  margin: 10vh auto;
  border-radius:4px;
  text-align:center;
  position:relative;
  -moz-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
  -webkit-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
   box-shadow: 0px 0px 28px rgba(0,0,0,.3);
   overflow:hidden;
}


.one {
  display:block;
  margin: 2vh;
  position:absolute;
}

.one{
  top:0;
  background:#fff;
  
}


.one  .heading{
  text-transform:capitalize;
  font-size:2.5vh;
  font-weight:900;
  
}

.container p{
  font-size:1.5vh;
  color:#b7b7b7;
  font-weight:lighter;
  text-transform:capitalize;
}

input{
  width:85%;
  height:7vh;
  margin-bottom:1vh;
  border:none;
  border-bottom:3px solid #A137FF;
  overflow:auto;
  position:relative;
  font-size:2vh;
}

input:active:focus,
input:focus,
input:hover{
  outline : none;
  font-size:2vh;
}

input:focus::-webkit-input-placeholder,
input:active:focus::-webkit-input-placeholder
{
  font-size:2vh;
  display:block;
  -webkit-transform:translateY(-20px);
  transform:translateY(-20px);
}

::-webkit-placeholder{
  font-size:2vh;
  color:#b7b7b7;
  text-transform:capitalize;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; 
}

::placeholder{
  font-size:2vh;
  color:#b7b7b7;
  text-transform:capitalize;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; 
}

.one  .btn{
  width:85%;
  background:#A137FF;
  padding:15px;
  border:none;
  border-radius:5px;
  font-size:1.8vh;
  color:#fff;
  text-transform:capitalize;
  font-family: 'Open Sans', sans-serif;
}

.one  .btn:active:focus,
.one  .btn:focus,
.one  .btn:hover{
  outline : none;
}

.one .btn:hover{
  cursor:pointer;
}

img {
   height: 40%; 
}

#passwordError {
    font-size:1.5vh;
    color:#A137FF;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:20px;
}

#message {
  width:85%;
  font-size:1.8vh;
  margin-bottom:1vh;
  margin-top:1vh;
  border: 3px solid #A137FF;
  overflow:auto;
  position:relative;
}