.photo{
  background-image: url("../images/mukkam.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 665px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
 #base {
  background: #1d3566;
  display: inline-table;
  height: 55px;
  margin-top: 55px;
  position: relative;
  width: 100%;
}
#base:before {
  border-bottom: 35px solid #1d3566;
  border-left: 440px solid transparent;
  border-right: 228px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -35px;
  width: 0;
}
.textInput {
  border-color: transparent;
  border-bottom: 1px solid #fff;
  color: #FFFFFF;
}
.form-control {
  background-color: transparent;
}
.textInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
}
.anim {
  width: 100px;
  background: red;
  position: relative;
  animation: mymove 2s;
  animation-fill-mode: forwards;
}
@keyframes mymove {
  from {left: -50px;}
  to {left: 2px;}
}
.wrap-login100{
  max-height: 650px;
}
.validate-form{
  padding: 146px;
  padding-top: 176px;
}

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) {
  .photo{
    background-color: #cccccc; /* Used if the image is unavailable */
    height: 897px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
  }
  .wrap-login100{
    max-height: 1000px;
  }
  .validate-form{
    padding: 50px;
    padding-top: 280px;
  }
}

.divForm {
  background-color: #2d93e8;
  border-radius: 15px;
}

.errorForm {
  border : 2px solid #f00;
}