* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}
.myVideo {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}
#login{
  left: 52%;
  position: absolute;
  width: 22%;
  text-align: center;
}
#login input{
  display: block;
  border-radius: 25px;
  background: transparent;
  width: 100%;
  border: 1px solid #cfcfcf;
  margin: 0 0 2% 0;
  padding: 10px;
  text-align: left;
  width: 86%;
  float: right;
}
#login img{
  float: left;
  width: 37px;
}

#loginLogo {
    /* float: left;*/
    /*This class willl make the image transparent*/
    mix-blend-mode: multiply;
    float: none !important;
    width: 120px !important;
    border-radius: 10px
}
#login span{
  float: bottom;
  width: 37px;
  font-size:10px;
}
input:focus{
  border: none;
  outline: none;
}
#login input[type="submit"]{
  margin-top: 3% ;
  background: #009de5;
  color:white;
  float: none;
  width: 100%;
  text-align: center;
  font-weight: bold;
}
#login h1{
  color:#d5252a;
  font-weight:100;
  font-size: 125%;
  margin-top: 0;
}
.box{
  clear: both;
}
#myVideo {
  display: block;
}
#myVideo-mobile {
  display: none;
}
@media (max-width: 720px) {
  #myVideo {
      display: none;
 }
  #myVideo-mobile {
      display: block;
 }
  #login {
      left: 10% !important;
      position: absolute !important;
      width: 80% !important;
      text-align: center !important;
      top: 35% !important;
 }
  #login h1{
      color:#d5252a;
      font-weight:100;
      font-size: 100%;
      margin-top: 0;
 }
  #login input[type="text"],#login input[type="password"]{
      width: 80% !important;
 }
}