/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

table, tr, th, td, {
    margin:0;
    padding:0;
    border:1;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* Code starting right here */
* {
  box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
  background-color: #e0e0e0;
  /* border: 1px solid #000; */
}
a {
  text-decoration: none;
}
.container {
  /* border: 1px solid #000; */
}
.login-wrapper {
  display: block;
  width:50%;
  height: 780px;  /* Setting height for all pc tablet and smartphone*/
  margin: 3% auto;
  background-color: #fff;
  /* border:1px solid #000; */
  border-radius: 20px;
}
.login-title {
  height:200px;
  /* border-bottom:1px solid #000; */
  background: url('kiis_photo.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  margin-bottom: 50px;
  

}
.login-title span {
  text-align: center;
  color:#fff;
  display:block;
  /* border:1px solid #000; */
  line-height: 200px;
  font-size: 50px;
  font-weight: bold;
  opacity: 0.6;
  text-shadow: 2px 2px 1px #00f,-2px 2px 1px #00f,2px -2px 1px #00f,-2px -2px 1px #00f;
}
.login-username,.login-pwd {
  /* border: 1px solid #000; */
  width: 100%;
  padding: 10px 10%;
}
.login-username span,.login-pwd span {
  /* border: 1px solid #aaa; */
  width:100px;
  display: inline-block;
  color:#7c7c7c;
}
.login-username input,.login-pwd input {
  border:none;
  border-bottom:1px solid #aaa;
  width:70%;
  padding:5px 5px;
  font-size: 17px;
  color:rgba(0, 0, 0,0.6)
}
.login-username input:focus,.login-pwd input:focus {
  outline: none;
  border-bottom: 1px solid #3ed648;
}
.login-plug {
  width:55%;
  height:30px;
  margin:15px 0 0 25%;
  /* border: solid 1px #000; */
}
/* starting */
.login-checkme {
  font-size: 13px;
  line-height: 20px;
  float:left;
}
.login-checkme label {
  opacity: 0.7;
}
.login-checkme label:hover {
  color:#3ed648;
}
.login-checkme input[type=checkbox] +label{
  display: block;
  cursor: pointer;
}
.login-checkme input[type=checkbox] {
  display: none;
}
.login-checkme input[type=checkbox] + label:before{
  content: "\2714";
  font-size: 15px;
  border:1px solid #7c7c7c;
  border-radius: 3px;
  padding:0px 4px;
  margin-right: 5px;
  display: inline-block;
  color: transparent;
  vertical-align: bottom;
  transition: 0.2s;
}
.login-checkme input[type=checkbox] + label:active:before{
  transform: scale(0);
}
.login-checkme input[type=checkbox]:checked + label:before{
  border:1px solid #3ed648;
  background-color:#3ed648;
  color:#fff;
  -webkit-text-fill-color:#fff;
}

.login-forgot-pwd {
  font-size: 13px;
  line-height: 20px;
  padding-top:1px;
  float:right;
}
.login-forgot-pwd a {
  color:#7c7c7c;
  border-bottom: 1px solid #7c7c7c;
}
.login-forgot-pwd a:hover {
  border-bottom:none;
  color: #3ed648;
}
/* End */
.login-button {
  width:100%;
  /* border: 1px solid #000; */
  text-align: center;
  padding:20px;
}
.login-button input {
  /* border:1px solid #000; */
  border-radius: 50px;
  display:inline-block;
  background-color: #3ed648;
  color:#fff;
  width:25%;
  height: 40px;
  outline: none;
  border: none;
  font-size: 19px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.5s;
}

.login-button input:hover {
  animation: jump 0.5s;
  background-color: #fff;
  color:#3ed648;
  border:1px solid #3ed648;
}

.subject-button {
  display: block;
  width:100%;
  /* border: 1px solid #000; */
  text-align: center;
	padding:1px;
}
.subject-button input {
  /* border:1px solid #000; */
  border-radius: 80px;
  display:inline;
  background-color: #add8e6;
  color:#556bef;
  width:45%;
  height: 35px;
  outline: none;
  border: none;
  font-size: 19px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.5s;

}

.subject-button input:hover {
  animation: jump 0.5s;
  background-color: #ffa500;
  color:#3ed648;
  border:1px solid #3ed648;
}
.subject-button button {
  /* border:1px solid #000; */
  border-radius: 80px;
  display:inline;
  background-color: #add8e6;
  color:#556bef;
  width:45%;
  height: 35px;
  outline: none;
  border: none;
  font-size: 19px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.5s;

}

.subject-button button:hover {
  animation: jump 0.5s;
  background-color: #ffa500;
  color:#3ed648;
  border:1px solid #3ed648;
}
@keyframes jump {
  0% {width:25%;
      font-size: 19px}
  50% {width:35%;
      font-size: 23px}
  100%{width:25%;
      font-size: 19px}
}
}